当前位置: 首页 > Web前端 > CSS

【前端学习】-border和border绘制三角形、box-shadow、border-radius的技巧

时间:2023-03-30 22:52:44 CSS

border是元素内容和padding周围的一条或多条线,border属性可以指定样式,宽度和颜色。文章会讲一些border的基础知识,以及围绕border、box-shadow和border-radius绘制三角形的技巧。取值:border-widththicknessborder-colorcolor默认颜色为字体颜色border-styletypenone/hidden/solid/dashed/dotted可以综合写成:border:widthcolorstyle注意:边框绘制在背景上,所以。一些透明背景会与边框重叠。这些在上一篇文章的背景中已经写过了,链接地址https://segmentfault.com/a/11...技巧一:使用border实现三角形总结:1.设置单边的border有一个颜色,并设置其旁边两侧的边框颜色透明,对面的边框不设置,三角形指向方向,不设置边(如6、7的情况)。8case,图7的case去掉上半部分)技巧二:使用box-shadow实现各种投影:单边,对边,双边(IE9+)技巧三:使用border-radius实现椭圆,1/2个椭圆,1/4个椭圆(IE9+)这些在上一篇文章border-radius中有写,链接地址https://segmentfault.com/a/11...