0
点赞
收藏
分享

微信扫一扫

background、border 渐变色

芭芭蘑菇 2021-09-28 阅读 229
背景渐变色:background

linear-gradient 线性渐变色
radial-gradent 径向渐变

示例:

background: radial-gradient(50px, #f00, #ff0, #080)

background: linear-gradient(to top right, #000, skyblue 10px , #090);
border渐变色

1.border-image
'20为宽度'

border-image:linear-gradient(50px, #f00, #ff0, #080) 20;

border-image: radial-gradient(to top right, #000, skyblue 10px , #090) 20; 

2.border-colors 只有火狐支持

-moz-border-top-colors:red orange yellow green cyan blue purple;
-moz-border-right-colors: red orange yellow green cyan blue purple;
-moz-border-bottom-colors: red orange yellow green cyan blue purple;
-moz-border-left-colors: red orange yellow green cyan blue purple;

3.使用 background-origin 、background-clip实现

    background-clip:padding-box,border-box;
    background-origin:padding-box,border-box;
    background-image:linear-gradient(180deg,#000,#000),linear-gradient(180deg,red,yellow);
    border:8px transparent solid;

4.通过padding实现,并支持 倒圆角
给父节点设置渐变背景,通过padding模拟边框(此处的padding值就是border需要的值),注意父元素和子元素的border-radius属性值保持一致

<html>
<head>

<style type="text/css">
.content { 
    width: 100px; 
    height: 100px; 
    box-sizing: border-box; 
    padding: 5px; 
    border-radius:50%; 
    background-image: -webkit-linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);  
    background-image: -moz-linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%); 
    background-image: linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);  
}
.box { 
    width:100%; 
    height:100%; 
    background:#fff; 
    border-radius:50%; 
}
</style>

</head>

<body>
<div class="content">
    <div class="box"></div>
</div>
</body>

</html>
举报

相关推荐

0 条评论