1.给ui要的背景图（常用） 2.用canvas画

切角的边框怎么实现

可以用两个div，一个用来做背景，设置border，一个写内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.content {
    height: 50px;
    background: #58a;
    border: 0px solid #ccc;
background: linear-gradient(135deg, transparent 15px, #fff 0) top left,
            linear-gradient(-135deg, transparent 15px, #fff 0) top right,
            linear-gradient(-45deg, transparent 15px, #fff 0) bottom right,
            linear-gradient(45deg, transparent 15px, #fff 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
    .wrap{
        height: 50px;
    background: #58a;
    border: 0px solid #ccc;
background: linear-gradient(135deg, transparent 15px, #ccc 0) top left,
            linear-gradient(-135deg, transparent 15px, #ccc 0) top right,
            linear-gradient(-45deg, transparent 15px, #ccc 0) bottom right,
            linear-gradient(45deg, transparent 15px, #ccc 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
    }
</style>
</head>
<body>
<div class="wrap" style="padding: 5px;">
<div class="content" style="text-align: center;">
渐变背景
</div></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

图片描述

<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> .b{ width: 200px; height: 200px; background-color: green; background: linear-gradient(-45deg, transparent 15px, #58a 0); } </style> <body> <div class="b"></div> </body> </html>

切角的边框怎么实现

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

js阻止冒泡问题？

Scss的rgba()方法无法对变量进行二次编译？