CSS笔记（十一）CSS3之边框
参考：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之边框的更多相关文章
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
- animate.css –齐全的CSS3动画库--- 学习笔记
animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
- css重点章节复习—布局-边框-边距-浮动 (部分)
css重点章节复习—布局-边框-边距-浮动 在第二个任务中,这一块的后面那条线真的弄了很久.起初也是在html里面写的代码.之后觉得这样不好,想到第一个页面中用到的border-bottom和bord ...
- CSS3之边框图片border-image
CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- css3(border-radius)边框圆角详解（转）
css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...
- css3圆角边框
圆角边框 一.border-radius属性简介 为元素添加圆角边框,可以对元素的四个角进行圆角设置(属性不具有继承性) 二.border-radius定义方法 border-radius属性有两 ...
随机推荐
- V4L2应用程序框架--一【转】
本文转载自:http://blog.csdn.net/tommy_wxie/article/details/11369667 V4L2是V4L的升级版本,linux下视频设备程序提供了一套接口规范. ...
- 配置SecondaryNameNode
一.SecondaryNameNode概念: 光从字面上来理解,很容易让一些初学者先入为主:SecondaryNameNode(snn)就是NameNode(nn)的热备进程.其实不是.ssn是HDF ...
- ACM题目————Equations
Description Consider equations having the following form: a*x1^2+b*x2^2+c*x3^2+d*x4^2=0 a, b, c, d a ...
- 2012年"浪潮杯"山东省第三届ACM大学生程序设计竞赛--n a^o7 ! 分类： 比赛 2015-06-09 17:16 14人阅读 评论(0) 收藏
n a^o7 ! Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 All brave and intelligent fighte ...
- JAVA基础知识之网络编程——-使用MutilcastSocket实现多点广播
IP多点广播原理 设置一组特殊网络地址作为多点广播地址,每一个多点广播地址都被看作一个组,当客户需要发送和接受信息时,加入到该组即可. IP协议为多点广播提供了一批特殊的IP地址,范围是224.0.0 ...
- 一种奇特的DEDE隐藏后门办法
转自:http://www.91ri.org/6462.html 一种奇特的DEDE隐藏后门办法 单位某站用的dedecms,今天被某黑阔getshell了,提交到了wooyun. 为了还原黑阔入 ...
- Axure一点2
4:找茬:先安装图片,在不同的地方安上动态面板(命名为左一),在动态面板上双击,添加动态,进去动态后添加矩形改色,设置透明度为0,回到主页面.并设为隐藏,复制到另一面(命名为右一).在右一上添加图像热 ...
- Auty自动化测试框架第一篇——生成执行列表
[本文出自天外归云的博客园] 在Auty的scripts文件夹中编写一个create_selection.py文件,用于在同级目录下针对同级目录scripts下的所有脚本生成一个selection.t ...
- hdu 3123
GCC Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total Submi ...
- Mysql-学习笔记（==》连接查询_高级查询五）
CREATE TABLE t( tid INT UNSIGNED NOT NULL AUTO_INCREMENT, tname VARCHAR(30), PRIMARY KEY (tid))ENGIN ...