css-reference/property/border-left/index.html at master · BGOOONZ-BLOG/css-reference · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
---
layout: single
property_name: border-left
---

<section id="border-left" class="property property--shorthand">
  <header class="property-header">
    <nav class="property-links">
      <a
        class="property-links-direct"
        href="{{site.url}}/property/border-left/"
        data-property-name="border-left"
        data-tooltip="Single page for this property"
        >Permalink</a
      >
      <a
        class="property-share"
        data-tooltip="Share on Twitter or Facebook"
        data-property-name="border-left"
        >Share</a
      >
      <a
        target="_blank"
        href="https://developer.mozilla.org/en/docs/Web/CSS/border-left"
        data-tooltip="See on Mozilla Developer Network"
        rel="external"
        >MDN</a
      >
    </nav>
    <h2 class="property-name">
      <a href="#border-left"><span>#</span>border-left</a>
    </h2>
    <div class="property-description">
      <p>
        Shorthand property for
        <code class="shorthand"
          ><a
            class="hash"
            href="{{site.url}}/property/border-left-width"
            data-property-name="border-left-width"
            >border-left-width</a
          ></code
        >
        <code class="shorthand"
          ><a
            class="hash"
            href="{{site.url}}/property/border-left-style"
            data-property-name="border-left-style"
            >border-left-style</a
          ></code
        >
        and
        <code class="shorthand"
          ><a
            class="hash"
            href="{{site.url}}/property/border-left-color"
            data-property-name="border-left-color"
            >border-left-color</a
          ></code
        >.
      </p>
    </div>
  </header>

  <section class="example">
    <header class="example-header">
      <p class="example-name">
        <code
          class="example-value"
          data-tooltip="Click to copy"
          data-clipboard-text="border-left: 4px dotted red;"
          >border-left: 4px dotted red;</code
        >
      </p>
      <div class="example-description">
        <p>The <strong>order</strong> is important:</p>
        <ul>
          <li>width</li>
          <li>style</li>
          <li>color</li>
        </ul>
      </div>
    </header>

    <aside class="example-preview">
      <div class="example-browser"><i></i><i></i><i></i></div>
      <div class="example-output">
        <div
          class="example-output-div border-left"
          id="border-left-4px-dotted-red"
        >
          Hello world
        </div>
      </div>
    </aside>
    <style type="text/css">
      #border-left-4px-dotted-red {
        border-left: 4px dotted red;
      }
    </style>
  </section>
  <section class="example">
    <header class="example-header">
      <p class="example-name">
        <code
          class="example-value"
          data-tooltip="Click to copy"
          data-clipboard-text="border-left: 2px solid;"
          >border-left: 2px solid;</code
        >
      </p>
      <div class="example-description">
        <p>
          Only the <em>color</em> is <strong>optional</strong>. If you omit it,
          the color applied will be the color of the <strong>text</strong>.
        </p>
      </div>
    </header>

    <aside class="example-preview">
      <div class="example-browser"><i></i><i></i><i></i></div>
      <div class="example-output">
        <div class="example-output-div border-left" id="border-left-2px-solid">
          Hello world
        </div>
      </div>
    </aside>
    <style type="text/css">
      #border-left-2px-solid {
        border-left: 2px solid;
      }
    </style>
  </section>
</section>