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. Redis哨兵(Sentinel)模式快速入门

    更多内容,欢迎关注微信公众号:全菜工程师小辉.公众号回复关键词,领取免费学习资料. 当主服务器宕机后,需要手动把一台从服务器切换为主服务器,这就需要人工干预,费事费力,还会造成一段时间内服务不可用. ...

  2. ets查询接口match、select说明

    ets:match/2用法:match(Tab, Pattern) -> [Match]返回和模式Pattern匹配的对象.一个匹配模式可能包含:绑定部分.'_'匹配任何Erlang项和匹配变量 ...

  3. java对象与json字符串的互相转换

    java对象与json字符串的互相转换 1.采用 net.sf.json.JSONObject maven依赖包: <dependency> <groupId>net.sf.j ...

  4. 聊聊Spring Cloud Config

    Spring Cloud Config 转自:https://blog.csdn.net/fjnpysh/article/details/71307311 现今这个时候,微服务大行其道,互联网应用遍地 ...

  5. Net基础篇_学习笔记_第十一天_面向对象(练习)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. VUE从入门到放弃(项目全流程)————VUE

    VUE从入门到放弃(第一天)--整体流程 先想想一个项目,vue项目是从什么到什么,然后再什么的?那是什么呢? 搭建 ( vue-cli) 代码内容 运行 封装 成品 一.搭建(脚手架vue-cli) ...

  7. 控制执行流程之switch语句

    switch语句,同时也是一种选择性语句,其根据整数表达式的值(整数选择因子)选择一段代码去执行.整数选择因子为int类型或者char类型.

  8. 【POJ - 3723 】Conscription(最小生成树)

    Conscription Descriptions 需要征募女兵N人,男兵M人. 每招募一个人需要花费10000美元. 如果已经招募的人中有一些关系亲密的人,那么可以少花一些钱. 给出若干男女之前的1 ...

  9. embedding技术

    目录 word2vec 负采样 目标函数 反向梯度 层次softmax NPLM的目标函数和反向梯度 目标函数 反向梯度 GNN(图神经网络) deepwalk node2vec 附录 word2ve ...

  10. 原来python如此神奇

    一.优缺点分析 1.缺点: ① 数学问题的生成中只考虑了消除乘除法加括号的无效情况(例如3*(4+5)或(6*5)/2这样的计算),但没有去掉加减法加括号的无效情况(例如(4+(7+8))或(3-(2 ...