1、使用“border-image”属性 “border-image”属性是创建渐变边框的正确方法。 HTML 该渐变边框使用了gradient-border和-using-border-image两个CSS属性。 CSS .gradient-border{ --color-1:rebeccapurple; --color-2:crimson; --border-radius:1.25rem; --border-width:0.5rem; width:100%; padding:2rem; ...
border-radius 一个值时表示四个角用的圆半径,4个值时分别是左上角、右上角、左下角、右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于可以快捷地设置圆角,而且通过这个属性我们还可以做出圆、半圆、四分一圆、椭圆等图形。 常用的圆角效果: 1 div{border-radius:15px;} 两...
a { position: relative; display: inline-block; font-size: 14px; color: #a81c2e; border: 1px solid; border-radius: 5px; padding: 15px 40px; } a:before { position: absolute; width: 98%; height: 100%; content: ''; display: block; border: 1px solid; border-image: linear-gr...
a { position: relative; display: inline-block; font-size: 14px; color: #a81c2e; border: 1px solid; border-radius: 5px; padding: 15px 40px; } a:before { position: absolute; width: 98%; height: 100%; content: ''; display: block; border: 1px solid; border-image: linear-gr...