?課程鏈接

【狂神說(shuō)Java】CSS3最新教程快速入門(mén)通俗易懂_嗶哩嗶哩_bilibili

?學(xué)習(xí)筆記

盒子模型

Title

/* body 總有一個(gè)默認(rèn)的外邊距 */

/* 常見(jiàn)操作 */

body{

margin: 0;

padding: 0;

text-decoration: none;

}

/* border 粗細(xì) 樣式 顏色 */

#box{

width: 300px;

border: 1px solid red;

padding: 0 0 0 0;

}

h2{

/* 去外邊距 */

margin: 0;

font-size: 16px;

background-color: gold;

line-height: 30px;

color: white;

}

form{

background: gold;

}

div:nth-of-type(1) input{

border: 3px solid black;

}

div:nth-of-type(2) input{

border: 3px dashed purple;

}

div:nth-of-type(3) input{

border: 2px dashed red;

}

會(huì)員登錄

賬戶：

密碼：

郵箱：

外邊距

Title

/* 順時(shí)針旋轉(zhuǎn) 上右下左 */

/* margin:0 全0 */

/* margin:0 1px 上下0 左右1 */

/* margin:0 1px 2px 3px 上右下左*/

#box{

width: 300px;

border: 1px solid red;

/* 上下為0 左右居中 */

margin: 0 auto;

}

h2{

margin: 0;

font-size: 16px;

background-color: gold;

line-height: 30px;

color: white;

}

form{

background: gold;

}

input{

border: 1px solid black;

}

div:nth-of-type(1){

padding: 10px;

}

會(huì)員登錄

賬戶：

密碼：

郵箱：

圓角邊框

邊框圓角

Title

div{

width: 100px;

height: 100px;

border: 10px solid red;

border-radius: 10px;

}

圓形

Title

div{

width: 100px;

height: 50px;

background: red;

border-radius: 50px 50px 0 0;

}

img{

border-radius: 37px;

}

陰影

Title

img{

margin: auto;

border-radius: 37px;

box-shadow: 10px 10px 50px yellow;

}

?轉(zhuǎn)載請(qǐng)注明出處

本文作者：雙份濃縮馥芮白

原文鏈接：https://www.cnblogs.com/Flat-White/p/14980267.html

版權(quán)所有，如需轉(zhuǎn)載請(qǐng)注明出處。

總結(jié)

以上是生活随笔為你收集整理的css盒子模型圆形运用,【前端】CSS3学习笔记（三）——盒子模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。