线性渐变
.baikuai {
width: 200px;
height: 200px;
// background: -ms-linear-gradient(to top left, white, blue);
// background: -webkit-linear-gradient(to top left, white, blue);
// background: -moz-linear-gradient(to top left, white, blue);
// background: linear-gradient(
// to top left,
// white,
// white,
// white,
// white,
// #fee4e5
// ); /*渐变从左上角到右下角*/
background: linear-gradient(-85deg, #3a342a 0%, #9b4a1b 40%, #3a342a 100%);//-85度开始渐变
}
实现四边形一个角的渐变,效果如
代码:
<template>
<view>
<div class="a">
<div class="b"></div>
</div>
</view>
</template>
<script>
export default {
name: "",
data() {
return {};
},
onLoad() {},
methods: {},
};
</script>
<style lang='scss' scoped>
.a {
position: relative;
width: 500px;
height: 300px;
background-color: aliceblue;
}
.b {
position: absolute;
top: 1px;
left: 1px;
width: 300px;
height: 100px;
border-radius: 10px;
background: linear-gradient(
to top left,
aliceblue,
aliceblue,//此处的颜色需跟父元素的背景色一致
aliceblue,
#cf855d
);
}
</style>