css盒子模型圆形运用,【前端】CSS3学习笔记（三）——盒子模型

✨课程链接

【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

✨学习笔记

盒子模型

Title

/* body 总有一个默认的外边距 */

/* 常见操作 */

body{

margin: 0;

padding: 0;

text-decoration: none;

}

/* border 粗细 样式 颜色 */

#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;

}

会员登录

账户：

密码：

邮箱：

外边距

Title

/* 顺时针旋转 上右下左 */

/* 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;

}

会员登录

账户：

密码：

邮箱：

圆角边框

边框圆角

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;

}

⭐转载请注明出处

本文作者：双份浓缩馥芮白

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

版权所有，如需转载请注明出处。