我用渐变背景和圆角编码了这个div
:
#pill {
font-size: 12px;
height: 40px;
width: 100px;
margin: 0 20px 0 20px;
background: transparent;
background-image: linear-gradient(#080, #cf0 45%, #cf0 55%, #080);
z-index: 1;
text-align: center;
}
#pill::before {
display: block;
content: '';
width: 40px;
height: 40px;
position: absolute;
margin-left: -20px;
z-index: -1;
border-radius: 40px;
background-image: radial-gradient(21px #cf0 5%, #080);
}
#pill::after {
display: inline-block;
content: '';
width: 40px;
height: 40px;
position: relative;
top: -14.5px;
right: -50px;
z-index: -1;
border-radius: 40px;
background-image: radial-gradient(21px #cf0 5%, #080);
}
使用Firefox的结果是:
我对必须使用硬接线值(特别是
::before
元素)的方式不满意。没有jQuery,有没有办法使所有内容动态化?我测试了CSS3
border-image-slice
,它看起来很有希望,但是它似乎拒绝了radial-gradient
作为边框图像。 最佳答案
或多或少要求的结果,但创建时带有阴影
您可以使用阴影参数进行微调。
#test {
height: 40px;
width: 140px;
border-radius: 20px;
background-color: #cf0;
box-shadow: inset 0px 0px 14px 10px #080;
}
#pill {
font-size: 12px;
height: 40px;
width: 100px;
margin: 0 20px 0 20px;
background: transparent;
background-image: linear-gradient(#080, #cf0 45%, #cf0 55%, #080);
z-index: 1;
text-align: center;
}
#pill::before {
display: block;
content: '';
width: 40px;
height: 40px;
position: absolute;
margin-left: -20px;
z-index: -1;
border-radius: 40px;
background-image: radial-gradient(circle 21px, #cf0 5%, #080);
}
#pill::after {
display: inline-block;
content: '';
width: 40px;
height: 40px;
position: relative;
right: -50px;
z-index: -1;
border-radius: 40px;
background-image: radial-gradient(circle 21px, #cf0 5%, #080);
}
<div id=pill></div>
<div id=test></div>
关于css - 带有渐变背景和圆 Angular 的div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29862378/