css設定四角邊框
1、程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>四角邊框</title>
<style>
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);
}
</style>
</head>
<body>
<div class="sijiaobiankuang">
<h1 style="text-align: center">Hello,小諸葛的部落格</h1>
</div>
</body>
</html>
2、執行效果
相關文章
- CSS 設定邊框透明度CSS
- CSS將邊框設定為虛線CSS
- CSS設定div邊框演示程式碼CSS
- CSS Grid 網格佈局邊框設定CSS
- CSS 邊框陰影立體邊框CSS
- CSS border邊框CSS
- table 設定合併邊框
- 關於border設定無邊框
- PhpSpreadsheet設定所有單元格邊框PHP
- css圓角矩形邊框CSS
- CSS 3半透明邊框CSS
- Html--給圖片設定邊框0.1HTML
- QT QLable屬性設定(尺寸,邊框等)QT
- 【叢林】CSS 邊框淺談CSS
- CSS border-radius 帶邊框CSS
- CSS實現流動邊框CSS
- CSS 邊框動態環繞CSS
- 教你玩轉CSS border(邊框)CSS
- CSS 設定文字框游標顏色CSS
- 2018.3.30 邊框應用與導航欄設定
- 如何使用CSS3的屬性設定模擬邊框跟border效果一樣?CSSS3
- CSS圖片邊框陰影效果CSS
- CSS border-collapse 細線邊框CSS
- CSS3多層邊框效果CSSS3
- CSS虛線邊框效果程式碼CSS
- css揭祕 - 背景與邊框 [一]CSS
- CSS的秘密——背景和邊框(下)CSS
- CSS 奇思妙想邊框動畫CSS動畫
- asp.net萬年曆,以及表格邊框設定ASP.NET
- windows10視窗邊框顏色怎麼設定_windows10邊框在哪裡設定Windows
- CSS3 border-radius帶邊框CSSS3
- css-虛線邊框滾動效果CSS
- Poi向Word插入表格,設定表格邊框和表格居中
- CSS 寫個帶邊框背景色透明的訊息框CSS
- 如何實現css漸變圓角邊框CSS
- CSS揭祕筆記(2):背景與邊框CSS筆記
- CSS3邊框動態環繞效果CSSS3
- css之左邊定寬右邊自適應CSS