html如何设置边角,css设置四角边框

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

来源：