首页 > > 网页制作 > css >

CSS深入理解之border_imooc张

2018-06-27 09:09:14来源：未知阅读 ()

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>cssborder</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding:0;
 10         }
 11         .test1{
 12             margin:20px;
 13             width: 100px;
 14             height: 100px;
 15             border: thin solid #666;
 16         }
 17         .test2{
 18             margin:20px;
 19             width: 100px;
 20             height: 100px;
 21             border: medium solid #666;
 22         }
 23         .test3{
 24             margin:20px;
 25             width: 100px;
 26             height: 100px;
 27             border: thick solid #666;
 28         }
 29         .test4{
 30             margin:20px;
 31             width: 100px;
 32             height: 100px;
 33             border: 3px dashed #666;
 34         }
 35         .test5{
 36             margin:20px;
 37             width: 100px;
 38             height: 100px;
 39             border: 3px dotted #666;
 40         }
 41         .test6{
 42             margin:20px;
 43             width: 100px;
 44             height: 100px;
 45             border: 3px double #666;/*双线风格至少要三3px才能出效果*/
 46         }
 47         .more{
 48             width: 120px;
 49             height: 20px;
 50             border-top:60px double;/*60px的双线边框，边框的空白分别是20px,20px,20px*/
 51             border-bottom: 20px solid;
 52             margin:60px;
 53             cursor: pointer;
 54         }
 55         /*border-color的默认颜色是color*/
 56         .add{
 57             position: relative;
 58             height: 100px;
 59             width: 100px;
 60             margin:60px;
 61             color: #ccc;
 62             transition: color .25s;
 63             border:1px solid;
 64             cursor: pointer;
 65         }
 66         .add:before{
 67             content: "";
 68             display: block;
 69             width: 60px;
 70             height: 10px;
 71             border-color: #ccc;
 72             position: absolute;
 73             top:50%;
 74             left: 50%;
 75             margin:-5px 0 0 -30px;
 76             border-top:10px solid;
 77         }
 78         .add:after{
 79             content: "";
 80             display: block;
 81             height: 60px;
 82             width: 10px;
 83             border-color:#ccc;
 84             border-left:10px solid;
 85             position: absolute;
 86             top:50%;
 87             left: 50%;
 88             margin:-30px 0 0 -5px;
 89         }
 90         .add:hover{
 91             color:#06c;
 92         }
 93         .test7{
 94             width: 0px;
 95             height: 0px;
 96             margin:60px;
 97             border:50px solid;
 98             border-color: red green blue orange;
 99         }
100         .test8{
101             width: 50px;
102             height: 50px;
103             margin:60px;
104             border:50px solid;
105             border-color: red green blue orange;
106         }
107         .test9{
108             width: 0px;
109             height: 0px;
110             margin:60px;
111             border:50px solid;
112             border-color:  green green transparent transparent;
113         }
114         /*
115             background-positiond定位元素的局限：只能在相对左上角数值定位，不能相对右下角。
116             将图片相对于右边定位：
117             border-right:50px solid transparent;
118             background-position:100% 40px;
119 
120 
121             100%右侧定位不见算border区域。
122             
123         */
124 
125         /*border透明边框增加响应区域的大小*/
126         .checkbox{
127             width: 16px;
128             height: 16px;/*如果是这样的话，点击区域太小，用户体验不好*/
129             border:2px solid transparent;/*设置2px的透明边框，整个点击区域的大小变为20px*/
130             box-shadow: inset 0 1px,inset 1px 0,inset -1px 0,inset 0 -1px;
131             background-color:#fff;
132             background-clip: content-box;
133             color: #d0d0d5;
134             margin:60px;
135         }
136 
137         /*
138             border实现等高布局。
139             局限：不支持百分比。
140         */
141 
142         .box{
143             margin:60px;
144             border-left:300px solid #222;
145             color: #ccc;
146         }
147         .left{
148             width:300px;
149             margin-left: -300px;
150             float: left;
151         }
152 
153     </style>
154 </head>
155 <body>
156     <div class="test1">thin:1px</div>
157     <div class="test2">medium:3px</div>
158     <div class="test3">thick:5px</div>
159     <div class="test4">style:dashed</div>
160     <div class="test5">style:dotted</div>
161     <div class="test6">style:double</div>
162     <div class="more">点击显示更多</div>
163     <div class="add"></div>
164     <div class="test7"></div>
165     <div class="test8"></div>
166     <div class="test9"></div>
167     <div class="checkbox"></div>
168 
169     <!--
170         border在布局方面的应用
171     -->
172     <div class="box">
173         <nav class="left">
174             <h3>导航1</h3>
175             <h3>导航1</h3>
176             <h3>导航1</h3>
177         </nav>
178         <section>
179             <div class="module">模块1</div>
180             <div class="module">模块1</div>
181             <div class="module">模块1</div>
182             <div class="module">模块1</div>
183         </section>
184     </div>
185 </body>
186 </html>