参考：http://www.w3school.com.cn/css3/css3_border.asp

　　

  • 圆角边框
<!DOCTYPE html>

<html>

<head>

<style>

div

{

text-align:center;

border:2px solid #a1a1a1;

padding:10px 40px;

background:#dddddd;

width:350px;

border-radius:15px;

-moz-border-radius:15px; /* 老的 Firefox */

}

</style>

</head>

<body>

<div>border-radius 属性允许您向元素添加圆角。</div>

</body>

</html>

效果：

  • 边框阴影
<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:300px;

height:100px;

background-color:#ff9900;

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */

box-shadow: 10px 10px 5px #888888;

}

</style>

</head>

<body>

<div></div>

</body>

</html>

效果：

  • 边框图片
<!DOCTYPE html>

<html>

<head>

<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>

</head>

<body>

<div id="round">在这里，图片铺满整个边框。</div>

<br>

<div id="stretch">在这里，图片被拉伸以填充该区域。</div>

<p>这是我们使用的图片：</p>

<img src="/i/border.png">

</body>

</html>

使用的图片：

效果：

新的边框属性

属性 描述 CSS
border-image 设置所有 border-image-* 属性的简写属性。 3
border-radius 设置所有四个 border-*-radius 属性的简写属性。 3
box-shadow 向方框添加一个或多个阴影。 3

CSS笔记（十一）CSS3之边框的更多相关文章

  1. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

  2. animate.css –齐全的CSS3动画库--- 学习笔记

    animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...

  3. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  4. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  5. css重点章节复习—布局-边框-边距-浮动 (部分)

    css重点章节复习—布局-边框-边距-浮动 在第二个任务中,这一块的后面那条线真的弄了很久.起初也是在html里面写的代码.之后觉得这样不好,想到第一个页面中用到的border-bottom和bord ...

  6. CSS3之边框图片border-image

    CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...

  7. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  8. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  9. css3(border-radius)边框圆角详解（转）

    css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...

  10. css3圆角边框

    圆角边框 一.border-radius属性简介   为元素添加圆角边框,可以对元素的四个角进行圆角设置(属性不具有继承性) 二.border-radius定义方法 border-radius属性有两 ...

随机推荐

  1. VMware中安装CentOS7网络配置静态IP地址，常用配置和工具安装

    VMware中安装CentOS7网络配置静态IP地址,常用配置和工具安装在阿里云开源镜像地址下载镜像Index of /centos/7.2.1511/isos/x86_64/http://mirro ...

  2. UTF8转码, 考虑利用app转好再传, CC2541转太麻烦了...

  3. linux curl用法详解

    linux ‍‍curl用法详解 ‍‍curl的应用方式,一是可以直接通过命令行工具,另一种是利用libcurl库做上层的开发.本篇主要总结一下命令行工具的http相关的应用, 尤其是http下载方面 ...

  4. String.Join 和 Distinct 方法 去除字符串中重复字符

    Qualys项目中写到将ServerIP以“,”分割后插入数据库并将重复的IP去除后发送到服务器进行Scan,于是我写了下面的一段用来剔除重复IP: //CR#1796870 modify by v- ...

  5. HDU 5996：dingyeye loves stone（阶梯博弈）

    http://acm.hdu.edu.cn/showproblem.php?pid=5996 题意:在一棵树上进行博弈,每次只能将当前的结点的石子放到父节点上,最后不能移动的输. 思路:比赛的时候想的 ...

  6. 网络统计学与web前端开发基础技术

    网络统计学与web前端开发基础技术 学习web前端开发基础技术(网页设计)需要了解:HTML.CSS.JavaScript三种语言.下面我们就来了解一下这三门技术在网页设计中的用途: HTML是网页内 ...

  7. Java获取当前第几周【转】

    本文copy自:http://swxzqsd.blog.sohu.com/156208509.html 作者:camelcanoe String today = "2010-01-11&qu ...

  8. YTU 2974: C语言习题5.26--文件操作3

    2974: C语言习题5.26--文件操作3 时间限制: 1 Sec  内存限制: 128 MB 提交: 213  解决: 92 题目描述 文本文件score.dic 中存储了n名学生的信息(班级编号 ...

  9. Java与.NET 的Web Services相互调用

    一:简介 本文介绍了Java与.NET开发的Web Services相互调用的技术.本文包括两个部分,第一部分介绍了如何用.NET做客户端调用Java写的Web Services,第二部分介绍了如何用 ...

  10. poj1988 Cube Stacking

    并查集的高效之处在于路径压缩和延迟更新. 在本题中需要额外维护子树的规模以及当前子树节点到跟的距离两个数组. 由于一个新的数必然是两棵树拼接而成,对于子树规模的更新直接相加即可, 对于节点到跟的距离: ...