前言:这是笔者学习以后本身的理解与整理。若是有错误或者疑问的地方,请你们指正,我会持续更新!css
border:border-width border-style border-color;css3
边框能够根据方向单独设置,上下左右,border-top | border-bottom | border-left | border-right ;浏览器
因此属性也能够单独设置,border-top-width | border-top-style | border-top-color ;app
单属性也能够有组合写法:性能
还能够根据方向来用组合写法:学习
边框的交界处是斜线,大师们用这个特性作出了三角形,配合其余属性,能够作出各类图形;测试
原理就是:控制四个方向的边框颜色,就能够作出三角形。再控制宽度,就能够作出各类不一样的钝角、锐角三角形;spa
.triangle { border-style: solid; border-width: 30px 50px 60px 80px; /*咱们能够控制各方向边框的宽度,作出各类不一样的三角形*/ border-color: #f00 #0f0 #00f #0ff; /*四个方向的颜色自由设置,当设置其余三个方向或两个方向的颜色为transparent(透明色)时,另外一方向就成了一个三角形*/ width: 0; /*盒子宽度为0,四个方向的border宽度一致,能够用border作正方形*/ margin: 100px; }
我比较喜欢根据方向来写三角形,这样容易理解:设计
.triangle { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #0ff; /*咱们通常根据方向来写三角形,这样容易记忆;箭头指向的反方向的颜色设置为你想要的,而后箭头方向不要写,另外两个方向的颜色设置为transperent透明*/ }
三角形作出来了,可是当咱们给元素定义一个 box-shadow,会出现以下状况:code
若是不想要阴影,很好解决,删掉三角形的 box-shadow 就行了;
而在实际应用中,咱们不少状况下是须要阴影的,只是阴影出如今三角形的两条边上,下图给容器设置了阴影;
咱们能够在加一个元素,也写成三角形,设置层级比箭头和容器元素都小,而且设置滤镜,位置比箭头稍高,露出边缘部分就能够了;
当咱们把以前的箭头删掉,就是如右图:
完成品:
PS:滤镜也有兼容性问题,建议用谷歌浏览器测试;
<style type="text/css"> .note { margin: 100px; width: 200px; height: 80px; background: #f60; position: relative; border-radius: 5px; box-shadow: 0 0 10px 0px #000; /*水平偏移---垂直偏移---模糊度---扩张半径---颜色*/ } .triangle { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #f60; /*咱们通常根据方向来写三角形,这样容易记忆;箭头指向的反方向的颜色设置为你想要的,而后箭头方向不要写,另外两个方向的颜色设置为transperent透明*/ position: absolute; top: -10px; left: 50%; margin-left: -10px; } .filter { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #000; position: absolute; top: -10px; left: 50%; margin-left: -10px; z-index: -1; filter: blur(2px); /*这又设计到滤镜的知识*/ } </style> <div class="wrapper"> <div class="note"> <span class="triangle"></span> <span class="filter"></span> </div> </div>
仍是 filter,可是设置 drop-shadow;
drop-shadow 不支持内阴影,可是支持不规则图形的阴影。
<style type="text/css"> .note { margin: 100px; width: 200px; height: 80px; background: #f60; position: relative; border-radius: 5px; /*box-shadow: 0 0 10px 0px #000;*/ /*水平偏移---垂直偏移---模糊度---扩张半径---颜色*/ filter: drop-shadow(0 0 6px #000); /*看清楚哦,drop-shadow没有扩张半径*/ } .triangle { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #f60; /*咱们通常根据方向来写三角形,这样容易记忆;箭头指向的反方向的颜色设置为你想要的,而后箭头方向不要写,另外两个方向的颜色设置为transperent透明*/ position: absolute; top: -10px; left: 50%; margin-left: -10px; } </style> <div class="wrapper"> <div class="note"> <span class="triangle"></span> </div> </div>
三角形阴影问题解决方法如上。
同理,三角形的边框也能够这样写:写个三角形,沉在箭头下边,颜色设置成边框颜色,位置比箭头稍高一些(容器边框宽度值),就能够了;
接下来我使用 :after 和 :before 写的三角形和边框,同理上面的阴影也能够这样;
<style type="text/css"> .note { margin: 100px; width: 200px; height: 80px; background: #f0f; position: relative; border-radius: 5px; border: 1px solid #000; } .note:after { content: ""; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #f0f; /*咱们通常根据方向来写三角形,这样容易记忆;箭头指向的反方向的颜色设置为你想要的,而后箭头方向不要写,另外两个方向的颜色设置为transperent透明*/ position: absolute; top: -10px; left: 50%; margin-left: -10px; } .note:before { content: ""; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #000; position: absolute; top: -11px; /*写个三角形,沉在箭头下边,颜色设置成边框颜色,位置比箭头稍高一些(容器边框宽度值),就能够了*/ left: 50%; margin-left: -10px; z-index: -1; } </style> <div class="wrapper"> <div class="note"></div> </div>
css3 属性 border-radius,“边框半径”,值能够用 px、em、pt、百分比等。
border-radius 支持四个角使用不一样弧度,方向依次是左上--右上--右下--左下(是从左上开始,顺时针)。
border-radius 还能够单独对每一个角设置:
单独设置能够写两个值,第一个值是水平半径,第二个值是垂直半径;若是只有一个值,那么水平和垂直相等。
<style type="text/css"> * { padding: 0; margin: 0; } .test { width: 200px; height: 80px; margin: 100px; background: #f0f; border-radius: 15px 20px 35px 50px / 10% 25% 1em 50%; /*水平-----/-----垂直,中间用“/”隔开*/ /*左上水平 右上水平 右下水平 左下水平 / 左上垂直 右上垂直 右下垂直 左下垂直*/ /*这种方法不推荐使用,太乱了,傻傻分不清楚*/ } </style> <div class="test"></div>
固然,这个属性咱们用的最多的就是画圆形,把值设成宽度的一半及以上(50%及以上)。
有的需求是边框外面还有边框,咱们能够用 outline 来写,有一个相关的属性 outline-offset,能够控制描边与边缘的位置关系,能够设置成负值;
outline 制做多重边框,最多只能两层,并且不能是弧形的;
.test { margin: 100px; width: 200px; height: 80px; border: 10px solid #f0f; outline: 15px solid #f90; outline-offset: -25px; }
box-shadow 能够作不少层(多了会很卡,电脑性能问题),并且配合 border-radius 属性能够作出弧形;
box-shadow 是不占据空间的,因此没法响应事件,咱们能够利用 inset 设置成内阴影,在扩大空间就行了;
.test { margin: 100px; width: 200px; height: 80px; border: 10px solid #f0f; border-radius: 25% 30% 50% 29%; box-shadow: 0 0 0 10px #0f0, 0 0 0 20px #ff0, 0 0 0 10px #0ff inset; /*水平偏移---垂直偏移---扩张半径---模糊度---颜色*/ /*能够写多个阴影,用逗号隔开*/ /*inset是内阴影*/ /*因为box-shadow属性并不占据空间,因此是没法响应事件的,咱们能够利用inset内阴影,再用padding扩充空间就行了*/ }