本文主要是介绍html如何设置边角,css设置四角边框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、代码
四角边框body{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.sijiaobiankuang{
width: 400px;
height: 400px;
background:
linear-gradient(to top, #306EEF, #306EEF) left top no-repeat,/*上左*/
linear-gradient(to right, #306EEF, #306EEF) left top no-repeat,/*左上*/
linear-gradient(to left, #306EEF, #306EEF) right top no-repeat,/*上右*/
linear-gradient(to bottom, #306EEF, #306EEF) right top no-repeat,/*上右*/
linear-gradient(to left, #306EEF, #306EEF) left bottom no-repeat,/*下左*/
linear-gradient(to bottom, #306EEF, #306EEF) left bottom no-repeat,/*左下*/
linear-gradient(to top, #306EEF, #306EEF) right bottom no-repeat,/*下右*/
linear-gradient(to left, #306EEF, #306EEF) right bottom no-repeat;/*右下*/
background-size: 2px 16px, 16px 2px, 2px 16px, 16px 2px;
background-color: rgba(36,56,128,0.21);
}
Hello,小诸葛的博客
2、运行效果
标签：四角,repeat,linear,no,gradient,306EEF,边框,css,left
来源： https://blog.csdn.net/LONG_Yi_1994/article/details/111274485
这篇关于html如何设置边角,css设置四角边框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
