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

css切角后如何添加边框

时间:2023-03-30 23:50:03 CSS

1.简单配置:无边框,四个切角,纯色背景border:none;background:#289eef;clip-path:polygon(10px0,calc(100%-10px)0,100%10px,100%计算(100%-10px),计算(100%-10px)100%,10px100%,0计算(100%-10px),010px);2.在简单配置的基础上直接添加边框和切角的边框也会被切掉clip-path:polygon(6px0,calc(100%-6px)0,100%6px,100%calc(100%-6px),计算(100%-6px)100%,6px100%,0计算(100%-6px),06px);3.显示完整的边框裁剪路径:polygon(6px0,calc(100%-6px)0,100%6px,100%calc(100%-6px),calc(100%-6px)100%,6px100%,0calc(100%-6px),06px);background:linear-gradient(-45deg,#289eef4px,#0c4e810)右下角,Linear-Gradient(45Deg,#289eef4px,#0C4E810)BottomLeft,线性渐变(135deg,#289eef4px,#0C4E810)左上角,线性渐变(-135deg,#289EEF4PX,#289EEF4PX,#289EEF4PX,#289EEF4PX,#289EEF4PX,#289EEF4PX,#289eef4PX,#right;background-size:50%51%;background-repeat:no-repeat;border:solid2px#289eef;