奇酷学院-CSS中border边框竟然可以这么用

1、CSS应用篇偶买噶！ border边框竟然可以这么用在我们平时网页中，想必大家一定用过 border，可以根据border给我们提供的各种属性 实现盒子的边框效果，那么今天就给大家分享一下边框的应用。1.常规姿势在CSS1中就定义了边框样式属性：border设置全部或指定具体边框样式。具体包括指定样式：宽度：width、样式：style (none、solid、dotted、dashed 等)、颜色：color。可以通过 border统一设置边框样式，也可以通过border-left:width stylecolor独立设置边框样式。这部分相对比较简单，下面我们来使用div示例及样式展示一下基

2、本设置方法：douLlfJdashed2.特殊姿势我们都知道，标准盒子模型的大小会受 content (width,height )、padding > border的影响， 所以，即使一个盒子未设置内容大小，只要有边框或内边距，盒子也是会有大小的。我们就从这里出发，假若盒子未设置宽度和高度，我们给盒子增加了边框大小为10px,给每边边框设置不同的颜色来看一下：.boxwidth; O;height: 0; border-style:solid; border-width: 19px; border-top-color border-bottom-color : border-left-

3、color :*F00f; border-right-color :#fQ-Fj假使只有上边框有颜色，其他边框的颜色均为透明:.boxwidth: e；height t 3;border;10px solid transparent; border-top - color1frfSS;.bexwidth: 0;height： B;border-topl&px solidborder-right: 10px solid transparent; 此时我们就会得到一个三角小图标，是不是感觉很神奇。再比如，我们给盒子设置width，再来观察下，你就会发现你得到了一个梯形。.boxwidth:

4、 lOpyj;height! e；border:iepx solid transparent; border*toQ*color:#fGG;.boxwidth; 10px;height; e；border-bottom:lSpx solidborder- left: 10px solid tran=p&rervtj border-right: lBpx solid transparent 3.借助其他样式合并输出姿势border边框还能与 border-radius 一起来做出我们希望效果。例如: boxlfloat: left;width: lpx;height: 10px;marg

5、in-right: 10px; border：© solid transparent; border-top:4px solid #f00; border*radius: 10p冥 000;再做一个月亮给你呀:）奇酷学院灯 IK uE DU COM.boxlfloat: left;uidth: 13px*height: 10px;| border:O solid 七厂nsparent； border'top:4px solid #f66; border-radius: 13px 9 9 © t>ox2float: left;width: 10px；height

6、 19px; borders a solid transparent;border-top:4pxsolid #f0Ajbord&r-radius:再送你一朵小花花：* b ox overflow:hidden； margin-bottom:Spx;box div float:leftj margin-right;5px; width;56px; height;5Opx; bolder：ipx solid*leflborder-radius：e 56% e 56%; .Ief2border-radius:59% 0 53% 0;)最后做一个火热的爱心送给你呀.boK( posit lo

7、r relatiwkidth 1160|>x; height:).boiM : boi'foi*,Q£posxtiQ n; dbs o 丄 kite;left: MpmsheightIcontent rp ,!j广61 sol I'd 宅营1*1 旨pw户电nt) border * r-ad i u-t 11 thS-pY p Q - b«kftrQur»ds*f&0i trflin-sfcrp? rotate(-45dpg); box:afterfpos 直七 ion :abalute"ft '48pxjtop:6px;wiidthLBSgjx;heightcontent s'* 11 j border: 0 solid