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 ...
随机推荐
- WordCount--统计输入文件的字符数、行数、单词数(java)--初级功能
码云地址: https://gitee.com/YuRenDaZ/WordCount 个人PSP表格: PSP2.1 PSP阶段 预估耗时 (分钟) 实际耗时 (分钟) Planning 计划 180 ...
- apache ignite系列(一): 简介
apache-ignite简介(一) 1,简介 ignite是分布式内存网格的一种实现,其基于java平台,具有可持久化,分布式事务,分布式计算等特点,此外还支持丰富的键值存储以及SQL语法(基于 ...
- eclipse下mybatis-generator-config插件
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration ...
- Day 7 vim 文件编辑与vim的使用
1.什么是vim? vi 和 vim 是Linux下的一个文本编辑工具,(可以理解为windows的记事本或word文档) 2.为什么要使用vim? 因为linux 系统一切皆为文件,而我们工作最多的 ...
- 浅谈Task的用法
Task是用来实现多线程的类,在以前当版本中已经有了Thread及ThreadPool,为什么还要提出Task类呢,这是因为直接操作Thread及ThreadPool,向线程中传递参数,获取线程的返回 ...
- RDD基本操作之Action
Action介绍 在RDD上计算出来一个结果 把结果返回给driver program或保存在文件系统,count(),save 常用的Action reduce() 接收一个函数,作用在RDD两个类 ...
- Basler acA2500-14gm 连接采图报错处理
新购 Basler acA2500-14gm 相机,使用从官方网站下载的 pylon v6 版本连接测试,报错: Type Time Source MessageError 2 ...
- selenium-01-简介
一.Selenium是什么? Selenium是ThroughtWorks公司一个强大的开源Web功能测试工具系列,本系列现在主要包括以下4款: 1.Selenium Core:支持DHTML的测试案 ...
- webdriver断言
操作(action).辅助(accessors)和断言(assertion): 操作action: 模拟用户与 Web 应用程序的交互.一般用于操作应用程序的状态. 如点击链接,选择选项的方式进行工作 ...
- 关于IDEA的maven没有artifacts的解决方法
做如下配置即可 settings-->bulid...-->Bulid Tools --> Maven-->Improting-->选中Impor Maven proje ...