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

成长笔记

时间:2023-03-31 11:04:18 CSS

css3中的border简单来说就是我们经常使用的border。每个人都必须知道它的功能。一个非常基本的用法也可以定义各种形状奇特的边框类型。你可以分别设置它的上、下、左、右边框。css样式边框:20px实心;左边框颜色:橙色;上边框颜色:棕色;右边框颜色:矢车菊蓝;下边框颜色:绿色;效果如下:如果上面的div的width和height没有给定,会是下面的情况:要画一个带boder的三角形,可以在上面的代码中做一些修改,加上border-width:15px015像素30像素;边框样式:实心;边框颜色:橙红色绿色;得到如下效果:离形成三角形还有一步之遥,哈??哈,这时候就需要使用透明度来实现border-top-color:transparent;边框底色:透明;根据自己的需要调整用boder画数字8或者看样式cssstyle.circle_1{margin:100pxauto;宽度:20px;高度:20px;行高:80px;背景:白色;边框:5pxsolidcadetblue;border-top-right-radius:50%;border-top-left-radius:50%;边框左下角半径:50%;变换:旋转(-45deg);}.circle_1::after{内容:“”;位置:绝对;顶部:22px;左:20px;宽度:20px;高度:20px;边框:5pxsolidcadetblue;边框左上角半径:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;变换:旋转(96度);}html部分

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