CSS3 入门到精通(一)
CSS 用于控制网页的样式和布局。
CSS3 是最新的 CSS 标准。
一. CSS3边框
实例
向 div 元素添加圆角:
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
CSS3 边框阴影
在 CSS3 中,box-shadow 用于向方框添加阴影:
实例
向 div 元素添加方框阴影:
div
{
box-shadow: 10px 10px 5px #888888;
}
CSS3 边框图片
通过 CSS3 的 border-image 属性,您可以使用图片来创建边框:
border-image 属性允许您规定用于边框的图片!
用于创建上面的边框的原始图片:

实例
使用图片创建围绕 div 元素的边框:
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
| 属性 | 描述 | CSS |
|---|---|---|
| border-image | 设置所有 border-image-* 属性的简写属性。 | 3 |
| border-radius | 设置所有四个 border-*-radius 属性的简写属性。 | 3 |
| box-shadow | 向方框添加一个或多个阴影。 | 3 |
CSS3 入门到精通(一)的更多相关文章
- HTML5+CSS3从入门到精通随书光盘 ISO 镜像视频教程
HTML5+CSS3从入门到精通(清华社“视频大讲堂”大系)通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于权威指南.高级程序设计.开发指南同类图书 ...
- HTML5+CSS3从入门到精通 中文pdf版
HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南.高级程序设计.开发指南同类图书,本书是一本适合快速入手的 ...
- HTML5从入门到精通(千锋教育)免费电子版+PDF下载
本书是HTML5初学者极好的入门教材之一,内容通俗易懂.由浅入深.循序渐进.本书内容覆盖全面.讲解详细,其中包括标签语义化.标签使用规范.选择器类型.盒模型.标签分类.样式重置.CSS优化.Photo ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- <程序员从入门到精通> -- How
定位 自己才是职业生涯的管理者,想清楚自己的发展路径: 远期的理想是什么?近期的规划是什么?今日的任务和功课又是什么? 今日之任务或功课哪些有助于近期之规划的实现,而近期之规划是否有利于远期之理想? ...
- 01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...
- 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...
- 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...
随机推荐
- JavaScript数组和伪数组
伪数组和数组 记住一句话: 伪数组是一个Object,数组是Array. 对象和数组之间的关系 JavaScript的内置函数继承与 Object.prototype. 可以认为new Array() ...
- Spring事务失效的2种情况
使用默认的事务处理方式 因为在java的设计中,它认为不继承RuntimeException的异常是”checkException”或普通异常,如IOException,这些异常在java语法中是要求 ...
- Android 网络通信框架Volley(一)
转自:http://blog.csdn.net/t12x3456/article/details/9221611 1. 什么是Volley 在这之前,我们在程序中需要和网络通信的时候,大体使用的东西莫 ...
- Unity3D_UGUI与NGUI的区别与优缺点
1. NGUI与UGUI的区别 1) UGUI的Canvas 有世界坐标和屏幕坐标; 2) UGUI的Image可以使用material; 3) UGUI通过Mask来裁剪,而NGUI通过Panel的 ...
- SqlServer 2014 还原数据库时提示:操作系统返回了错误5,,拒绝访问
场景 在进行数据库还原时提示: System.Data.SqlError:在对”“尝试”“时,操作系统返回了错误5(拒绝访问) 实现 第一种方案是修改要还原的数据库备份文件的权限. 找到备份文件右击属 ...
- 漫谈Java中的OOPS
什么是OOPS? 面向对象编程是一种编程概念,其工作原理是对象是程序中最重要的部分.它允许用户创建他们想要的对象,然后创建处理这些对象的方法.操作这些对象以获得结果是面向对象编程的目标. 面向对象编程 ...
- 超级密码(BFS)
Problem Description Ignatius花了一个星期的时间终于找到了传说中的宝藏,宝藏被放在一个房间里,房间的门用密码锁起来了,在门旁边的墙上有一些关于密码的提示信息: 密码是一个C进 ...
- StackOverflow 周报 - 第四周高质量问题的问答(Java、Python)
这是 Stack Overflow 第三周周报,由于本周周四外出,所以只有三篇内容.两篇 Java.一篇 Python.公众号「渡码」为日更,欢迎关注. DAY1. 枚举对象 == 和 equals ...
- [Leetcode] 第338题 比特位计数
一.题目描述 给定一个非负整数 num.对于 0 ≤ i ≤ num 范围中的每个数字 i ,计算其二进制数中的 1 的数目并将它们作为数组返回. 示例 1: 输入: 2 输出: [0,1,1] 示例 ...
- Django+MySQL Dashboard 网页端数据库可视化
1. Overview Python+MySQL+Django, 有些数据托管在 MySQL 的数据库,然后我们希望进行可视化,通过 web 的方式对数据库的信息去进行展示/检索/维护/.. 这个项目 ...