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

成长笔记_0

时间:2023-03-31 00:01:06 CSS

css3中的border简单来说就是我们经常使用的border。每个人都必须知道它的功能。一个很基础的用法eg:border:1pxsolidblack还可以定义各种奇形怪状的边框类型,可以单独设置css样式border:20pxsolid;左边框颜色:橙色;上边框颜色:棕色;右边框颜色:矢车菊蓝;下边框颜色:绿色;对于div的宽高,会是这样:要画一个带boder的三角形,可以在上面的代码中做一些修改,添加border-width:15px015px30px;边框样式:实心;边框颜色:橙红色绿色;效果如下:离形成三角形差一步了,哈哈,这时候就需要用transparent来实现border-top-color:transparent;border-bottom-color:transparent;根据您的需要调整boder绘制数字8或者只看样式cssstyle.circle_1{margin:100pxauto;宽度:20px;高度:20px;行高:80px;背景:白色;border:5pxsolidcadetblue;border-top-right-radius:50%;边框左上角半径:50%;边框左下角半径:50%;变换:旋转(-45deg);}.circle_1::after{内容:“”;:22px;左:20px;宽度:20px;高度:20px;border:5pxsolidcadetblue;边框左上角半径:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;变换:旋转(96度);}html部分

效果如图总结看完这篇文章,你是不是觉得边框很有意思,生活中一些常见的形状都可以用它来实现。可以用边框做的形状可以用图片代替