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 入门到精通(一)的更多相关文章

  1. HTML5+CSS3从入门到精通随书光盘 ISO 镜像视频教程​

    HTML5+CSS3从入门到精通(清华社“视频大讲堂”大系)通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于权威指南.高级程序设计.开发指南同类图书 ...

  2. HTML5+CSS3从入门到精通 中文pdf版​

    HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南.高级程序设计.开发指南同类图书,本书是一本适合快速入手的 ...

  3. HTML5从入门到精通(千锋教育)免费电子版+PDF下载

    本书是HTML5初学者极好的入门教材之一,内容通俗易懂.由浅入深.循序渐进.本书内容覆盖全面.讲解详细,其中包括标签语义化.标签使用规范.选择器类型.盒模型.标签分类.样式重置.CSS优化.Photo ...

  4. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  5. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  6. <程序员从入门到精通> -- How

    定位 自己才是职业生涯的管理者,想清楚自己的发展路径: 远期的理想是什么?近期的规划是什么?今日的任务和功课又是什么? 今日之任务或功课哪些有助于近期之规划的实现,而近期之规划是否有利于远期之理想? ...

  7. 01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...

  8. 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  9. 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

随机推荐

  1. 去重合并两个有序链表之直接操作和Set集合操作

    两者思路对比: 直接操作:因为传入的是两个有序的链表,所以说我就直接以其中一个链表为基准,与另外一个链表比较,只将比返回值链表的最后一个记录的值大的插入,不将等值的插入,理论时间复杂度为O(n) Se ...

  2. print.js继承原有样式

    npm install --save print-js import Print from 'print-js' 调用print.js插件 Print({ printable: 'printJS-fo ...

  3. Jmeter 逻辑控制器 之 事务控制器

    前面我在做性能测试的时候,由于我们的系统是需要登录的,登录成功后,系统默认加载其订单数据,因此在用户看来这是一个操作.所以为了模拟这个操作,我需要访问两个接口,并且把这两个接口的响应时间算在一起,那么 ...

  4. FreeSql (二十八)事务

    FreeSql实现了四种数据库事务的使用方法,脏读等事务相关方法暂时未提供.主要原因系这些方法各大数据库.甚至引擎的事务级别五花八门较难统一. 事务用于处理数据的一致性,处于同一个事务中的操作是一个U ...

  5. 【第十四篇】easyui datagrid导出excel

    <a class="btn btn-app" onclick="exportExcel()"><i class="fa fa-edi ...

  6. [Pandas] 05 - Parallel processing

    相关资源 [Python] 09 - Multi-processing [Pandas] 01 - A guy based on NumPy [AI] 深度数学 - Bayes 这章非常有意思,但一定 ...

  7. spring字符编码filter

    项目中的字符编码问题,spring提供统一的字符处理filter,只需要在项目入口web.xml中配置CharacterEncodingFilter即可,具体配置如下: <!-- 配置过滤器,同 ...

  8. css禁止选中文字

    很简单: -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10 ...

  9. 5分钟了解Prometheus

    Prometheus(译:普罗米修斯)用领先的开源监控解决方案为你的指标和警报提供动力(赋能). 1.  概述 1.1.  Prometheus是什么? Prometheus是一个开源的系统监控和警报 ...

  10. 第八届蓝桥杯java b组第三题

    标题:承压计算 X星球的高科技实验室中整齐地堆放着某批珍贵金属原料. 每块金属原料的外形.尺寸完全一致,但重量不同.金属材料被严格地堆放成金字塔形. 7                         ...