CSS3练习
教材：CSS设计指南
文章目录
思路
- 确定网页的布局与结构，将它们分割开来，先写出各个主要的结构化标记。
- 为包含整体的
<body>标记等先添加一些基础的CSS，如font-family，background，margin等等，确定一个基准。 - 逐步对每个结构添加内容并进行样式化。
1. 为盒模型添加阴影
负扩展值把阴影定位到盒子内部。
box-shadow:4px 4px 5px 8px #aaa inset;
box-shadow 属性的这几值分别代表：水平偏移量、垂直偏移量、模糊量、扩展量、颜色、阴影位于边框内部（默认位于边框外部，即outset）。
相当于生成一个与元素宽度高度一致的阴影区域，根据偏移量放置在元素下方。
2. 将边界赋予圆角效果：
border-radius:10px;
这样，盒子的四角都会变成半径为10 像素的圆角。
也可以分别设置水平和垂直半径
3. 居中没有宽度的元素
对于没有预先设定好宽度的元素(宽度会变化)的元素来说，不能使用margin: 0 auto来实现自动居中，因为不知道宽度时，没法正确调节边界宽度。
方法：
- 将该元素的
display属性设为inline-block。使它既具有内联元素特点又具有块元素的特点。 - 将父元素的
text-align属性设为center，这个属性可以控制父元素中的内联元素如何与父元素对齐，在上一步中的display设置使得该元素可以被视为内联元素从而进行居中对齐。
4.关于inline-block：
既有块级元素的特点，也有行内元素的行为。从块级元素角度说，可以为它设定外边距和内边距，也可以通过它简便而有效地包围其他块级元素。从行内元素角度看，它会收缩包裹自己的内容，而不是扩展填充父元素。换句话说，inline-block
最低0.47元/天 解锁文章
1048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
