参考：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. linux-exp 工具+小技巧

    # 工具篇 # pwntools ,gdb-peda ROPgadget-tool . EDB ## pwntools获取.安装和文档帮助 ## - pwntools: github可以搜索到 htt ...

  2. IBatisNet Demo （升级from 1.1）

    sqlMap.config, 要修改provider的设置 <providers resource="providers.config"/> <database& ...

  3. Shell之while循环

    While循环的格式: while expression do command command ... done 1.计数器控制的while循环:主要用于已经准确知道要输入的数据和字符串的数目. 例子 ...

  4. 减少GC开销的措施

    程序的运行会直接影响系统环境的变化,从而影响GC的触发.若不针对GC的特点进行设计和编码,就会出现内存驻留等一系列负面影响.为了避免这些影响,基本的原则就是尽可能地减少垃圾和减少GC过程中的开销.具体 ...

  5. AtomicInteger类保证线程安全的用法

    J2SE 5.0提供了一组atomic class来帮助我们简化同步处理.基本工作原理是使用了同步synchronized的方法实现了对一个long, integer, 对象的增.减.赋值(更新)操作 ...

  6. ajax 无刷新分页

    //ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...

  7. JavaScript DOM 编程艺术（第2版）读书笔记（5）

    最佳实践 平稳退化 网站的访问者完全有可能使用的是不支持Javascript的浏览器,还有一种可能是虽然浏览器支持Javascript,但用户已经禁用它了.如果没有考虑到这种情况,人们在访问你们的网站 ...

  8. 上传文件时，Request报文头不同浏览器会产生不同的content-type

    选择一个zip文件上传,用IE看的报文头是image/jpeg,用chrom看是application/octet-stream. 第一次遇到这个类型的content-type,百度了一下, octe ...

  9. 连接无线设备——与Wi-Fi直接连接

    原文链接:http://developer.android.com/intl/zh-CN/training/connect-devices-wirelessly/wifi-direct.html 目录 ...

  10. Android activity界面跳转动画

    实现activity界面跳转动画 1.在startActivity方法之后加入: overridePendingTransition(R.anim.pull_in_right, R.anim.pull ...