Web全栈工程师之路(二)——CSS篇(四)——布局——盒子模型的尺寸、轮廓、阴影与圆角
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3初识(三)布局——盒子模型的尺寸、轮廓、阴影与圆角</title>
<style>
*{
/*在通配符里将默认样式清空(不完整)*/
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: #666666;
border: 5px solid red;
padding: 10px;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
outline: 5px solid blue;
padding: 10px;
box-shadow: 20px 20px 10px #666666;
border-radius: 5px 10px 20px;
}
/*
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
box-sizing(尺寸属性)：用来设置盒子尺寸的计算方式(设置width和height的作用)
可选值：
content-box：默认值，宽度和高度用来设置内容区的大小
border-box：宽度和高度用来设置整个盒子的可见框的大小
outline(轮廓属性)：类似border，但不影响可见框大小，只是在外部加了一个边框，可能会遮挡到周围的元素
相当于在周围设置一圈轮廓线
box-shadow(阴影属性)：
属性值：
(右侧偏移量)px (下侧偏移量)px (阴影虚化半径)px 颜色(顺序可调整)
注意：阴影不会影响布局
border-radius(圆角属性)：
属性值：
(左上角半径)px (右上角半径)px (右下角半径)px (左下角半径)px
(所有圆角的半径)px
(左上、右下角的半径)px (右上、左下角的半径)px
(横向边)px / (纵向边)px 椭圆变换
百分比% (50%为圆形)
border-top-left-radius：设置左上角的圆角 px
border-top-right-radius：设置右上角的圆角 px
border-bottom-left-radius：设置左下角的圆角 px
border-bottom-right-radius：设置右下角的圆角 px
以上四个单独圆角的椭圆设置：(横向边)px (纵向边)px
*/
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<p>这里的文字没有被阴影挡住</p>
</body>
</html> 相关推荐
jiedinghui 2020-05-14
yaodilu 2020-03-08
impress 2020-01-11
zengni 2019-12-24
zhanghao 2019-12-12
CaiKanXP 2019-11-12
waterv 2019-10-31
CaiKanXP 2019-10-20
zyhui 2018-01-13
沉着前进 2018-02-08
武林半侠 2018-01-13
Phoebe的学习天地 2019-06-28
csscode 2014-12-02
zuncle 2014-09-17
沉着前进 2014-07-21
尚衍亮 2014-04-10
昔人已老 2014-01-05
Phoebe的学习天地 2013-07-02
wangnantjobj 2019-06-21