div四角边框直角、倒角、圆角、倒圆角

認真的雪

已于 2024-07-04 13:54:55 修改

阅读量7.1k

点赞数 4

分类专栏： css 文章标签： css css3 html

于 2021-11-10 10:49:24 首次发布

本文链接：https://blog.youkuaiyun.com/w_ang_y_i/article/details/121243498

版权

css 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何仅通过一个div元素，利用CSS的背景属性和渐变技巧，创建出边框的各种形状，包括直角、倒角、圆角以及倒圆角效果。示例代码展示了如何调整样式以达到预期设计，为前端开发者提供了实用的参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只用一个div实现边框直角、倒角、圆角、倒圆角
样式自调
在这里插入图片描述

	<div class="box_border_radius"></div>

.box_border_radius{
	width: 100px;
	height: 100px;
	background: linear-gradient(135deg, #fff 20px, transparent 0) top left,
	radial-gradient(circle at 0% 100%, transparent 13px, #1359df 0) top right, 
	linear-gradient(#1359df, #1359df) right bottom,
	linear-gradient(#1359df, #1359df) right bottom,
	radial-gradient(circle at 0% 100%, #fff 13px, transparent 0) bottom left #00CAF5;
	background-size: 50% 50%,15px 15px,5px 20px, 20px 5px,30% 30%;
	background-repeat: no-repeat;
	border-radius: 0 15px 0 0;
}
// 四个直角
{
	background: linear-gradient(to left, #da3a2a, #da3a2a) left top,
      linear-gradient(to bottom, #da3a2a, #da3a2a) left top,
      linear-gradient(to left, #da3a2a, #da3a2a) right bottom,
      linear-gradient(to left, #da3a2a, #da3a2a) right bottom;
}