CSS3 背景和边框
来源:互联网 发布:淘宝什么产品最好卖 编辑:程序博客网 时间:2024/05/12 15:45
CSS3完全向后兼容,因此不必改变现有的设计。
css3中的模块:
选择器,框模型,背景和边框,文本效果,2D/3D转换,动画,多列布局,用户界面
1. 边框
Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
Firefox、Chrome 以及 Safari 支持所有新的边框属性。
圆角
<style>div{position:relative;top:50px;left:30px;width:200px;border:2px solid blue;border-radius:20px;}</style><div>这是一段文字,通过css3可以设置圆角。</div>
阴影
<style>div{position:relative;top:50px;left:30px;width:200px;height:100px;background-color:#CC6699;box-shadow:10px 10px 5px #888888;<!--第一个参数:水平阴影的位置,允许为负值。第二个参数垂直阴影,允许负值。第三个参数模糊距离。-->}</style><div>这是一段文字,通过css3可以设置阴影。</div>
边框图像
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
<style> div{border:15px solid transparent;width:300px;padding:10px 20px;}#round{-moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */-webkit-border-image:url(/i/border.png) 30 30 round; /* Safari and Chrome */-o-border-image:url(/i/border.png) 30 30 round; /* Opera */border-image:url(/i/border.png) 30 30 round;}#stretch{-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */-webkit-border-image:url(/i/border.png) 30 30 stretch; /* Safari and Chrome */-o-border-image:url(/i/border.png) 30 30 stretch; /* Opera */border-image:url(/i/border.png) 30 30 stretch;}</style><div id="round">在这里,图片铺满整个边框。</div><br><div id="stretch">在这里,图片被拉伸以填充该区域。</div><p>这是我们使用的图片:</p><img src="/i/border.png">
2.背景
background-size
css3之前,背景图片的尺寸是由图片的实际尺寸决定的。在css3中,可以规定背景图片的尺寸,这就允许我们重复使用背景图片。
background-size:200px 100px;
background-origin属性
规定背景图片的定位区域
代码:
<style>div{border:2px solid blue;padding:30px;width:400px;height:300px;background-image:url(../images/1.jpg);background-repeat:no-repeat;}#div1{background-origin:border-box;}<!--第一个背景图片放在边缘-->#div2{background-origin:content-box;<!--第一个背景图片放在内容-->}</style><div id="div1">这是一段文字,这是一段文字,这是一段文字,这是一段文字,这是一段文字,这是一段文字,</div><div id="div2">这是一段文字,这是一段文字,这是一段文字,这是一段文字,这是一段文字,这是一段文字,</div>
多重背景
background-image:url(../images/1.jpg),url(../images/11.png);
0 0
- CSS3 背景和边框
- CSS3-边框和背景
- CSS3使用边框和背景
- CSS3:元素的边框、背景和大小
- CSS3边框 , 背景
- CSS3——新增背景属性和边框样式
- Css3(05) 背景与边框
- CSS3背景与边框相关样式
- CSS3 边框/颜色/文字与字体/背景
- CSS3背景与边框相关样式
- CSS3 1 边框-背景-文本-字体
- Css3 常用选择器 背景 边框 渐变
- 背景和边框
- html 背景和边框
- CSS边框和背景
- CSS边框和背景
- CSS3下不一样的阴影、背景和圆角边框样式
- CSS3边框和圆角
- MYSQL(一)
- android 获取设备信息
- MyBatis批量新增和更新
- 【复习】servlet之session
- jquery datatable插件使用分享
- CSS3 背景和边框
- R语言中进行文件夹及文件夹内文件操作范例
- Linux时间同步+国内常用的NTP服务器地址
- Jenkins使用学习参考资料收集
- 计算机底层是如何访问显卡的?
- Android产品研发(十二)-->App长连接实现
- IOS中NSUserDefaults的用法(轻量级本地数据存储)
- android:ToolBar详解
- VMware下扩展ubuntu虚拟机根目录分区