CSS基础(四)
来源:互联网 发布:全景旅游教学软件 编辑:程序博客网 时间:2024/06/05 19:14
CSS3基础
一、CSS轮廓
1.作用:主要是用来突出元素的作用
2.属性与描述
3.示例
二、多列
多列属性
多列示例
属性
描述
CSS
column-count
规定元素应该被分隔的列数。
3
column-fill
规定如何填充列。
3
column-gap
规定列之间的间隔。
3
column-rule
设置所有 column-rule-* 属性的简写属性。
3
column-rule-color
规定列之间规则的颜色。
3
column-rule-style
规定列之间规则的样式。
3
column-rule-width
规定列之间规则的宽度。
3
column-span
规定元素应该横跨的列数。
3
column-width
规定列的宽度。
3
columns
规定设置 column-width 和column-count 的简写属性。
3
瀑布流效果
瀑布流效果就是指多列宽度相同,高度不等分布的效果
瀑布流实现示例
三、边框相关样式
1.圆角边框
1.1作用
圆角边框的绘制是Web网站或Web应用程序中经常用来美化页面效果的手法之一。
1.2语法
border-radius: 取值
注意:按顺序设置每个 radii 的四个值。如果省略 bottom-left,则与top-right 相同。如果省略bottom-right,则与top-left 相同。如果省略top-right,则与top-left 相同。
1.3实例—向div元素添加圆角边框
div
{
border:2px solid;
border-radius:25px;
}
2.图像边框
21.作用
在CSS3中,增加了border-image属性,可以让元素的长度或宽度处于随时变化状态的边框统一使用一个图像文件来进行绘制。
2.2.语法
值
描述
测试
border-image-source
用在边框的图片的路径。
border-image-slice
图片边框向内偏移。
border-image-width
图片边框的宽度。
border-image-outset
边框图像区域超出边框的量。
border-image-repeat
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
border-image 属性是一个简写属性,用于设置以上属性。
2.3.实例--将图片规定为包围div 元素的边框:
div
{
-webkit-border-image:url(border.png) 30 30 round;/* Safari 5 */
-o-border-image:url(border.png) 30 30 round;/* Opera */
border-image:url(border.png) 30 30 round;
}
3.边框阴影
3.1作用
在 CSS3 中,box-shadow用于向方框添加阴影。
3.2 语法
box-shadow: h-shadow v-shadow blur spread color inset;
注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset关键词来规定。省略长度的值是 0。
值
描述
测试
h-shadow
必需。水平阴影的位置。允许负值。
测试
v-shadow
必需。垂直阴影的位置。允许负值。
测试
blur
可选。模糊距离。
测试
spread
可选。阴影的尺寸。
测试
color
可选。阴影的颜色。请参阅 CSS 颜色值。
测试
inset
可选。将外部阴影 (outset) 改为内部阴影。
测试
3.3实例--向div 元素添加box-shadow:
div
{
box-shadow: 10px 10px 5px #888888;
}
- CSS基础(四)
- Css基础学习(四)—文本
- CSS基础(四):盒模型
- HTML+CSS基础课程(四)
- CSS基础(四) 个人笔记
- CSS基础(四)框的定位
- CSS基础(四)--Margin
- XHTML与CSS基础:(四)CSS选择器
- XML:CSS基础之四
- HTML+CSS基础(四):认识html标签
- CSS学习笔记--基础(四)
- html和CSS基础学习(四)字体的总结
- 慕课网《HTML+CSS基础课程》笔记总结(四)
- [知识点滴]关于CSS Reset 那些事(四)之 构架CSS基础样式库
- CSS基础学习四:元素选择器
- 《HTML+CSS基础课程》学习笔记四
- 【CSS基础】css3 transition过渡属性<四>
- css兼容问题(四)
- LocalDateTime的使用
- DispatcherServlet与初始化主线
- 6.10
- Tomcat搭建Web 应用服务器
- 侧拉+底部按钮
- CSS基础(四)
- 基于贝叶斯决策理论的分类器
- Andriodjie——二级列表实现购物车
- 两种构建具有ToolBar的BaseActivity的方式
- Python 文本和数字相等判断
- 两个复选框的联动效果
- DateTimeFormatter的使用
- 软件工程导论第十一章面向对象设计
- Bean.Result