CSS中怎么做缺角矩形效果，方法是什么？
发布时间：2022-02-14 13:07:12 所属栏目：语言 来源：互联网
导读：这篇文章给大家分享的是CSS中怎么做缺角矩形的效果，这里我们使用了background属性和linear-gradient()函数，具有一定的参考价值，因此分享给大家做个参考。文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。 本教程操作
|
这篇文章给大家分享的是CSS中怎么做缺角矩形的效果，这里我们使用了background属性和linear-gradient()函数，具有一定的参考价值，因此分享给大家做个参考。文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。 本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。 css3怎样实现带边框的缺角矩形 在css中，想要实现带边框的缺角样式，需要利用background属性和linear-gradient()函数。 background属性用于设置元素的背景样式， linear-gradient()函数用于设置元素的线性渐变样式，只需要这只线性渐变的角度和渐变颜色，就能够将矩形元素设置为缺角的样式。 这时候元素虽然缺角，但是不能使用border样式直接加边框，因为元素只是背景样式便为了缺角的样子，边框仍然是矩形的样式。 我们可以将相同方向的缺角矩形，小的缺角矩形元素放置在大的缺角矩形元素里即可。 示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 100px; height: 60px; padding: 4px; background:linear-gradient(135deg,transparent 10px,#2baaca 0); } .box_inner{ width: 100%; height: 100%; background: linear-gradient(135deg, transparent 9px, #fff 0); } </style> </head> <body> <div class="box"> <div class="box_inner"></div> </div> </body> </html> （编辑：衡水站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
