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属性有两 ...
随机推荐
- jQuery上传插件,文件上传测试用例
jQuery上传插件,文件上传测试用例 jQuery File Upload-jQuery上传插件介绍http://www.jq22.com/jquery-info230 jQuery File Up ...
- linux进程的堆栈空间_代码段（指令，只读）、数据段(静态变量，全局变量)、堆栈段(局部变量)、栈【转】
转自:http://blog.csdn.net/gongweijiao/article/details/8207333 原文参见:http://blog.163.com/xychenbaihu@yea ...
- Java遍历Map的3种方式
package test; import java.util.Collection; import java.util.HashMap; import java.util.Map; import ja ...
- 【jqGrid for ASP.NET MVC Documentation】.学习笔记.6.分层
1 两级分层 每个父 grid 的行,都能有子 grid .这被叫做 层次,它用来显示相关的 表,主信息 –> 明细信息等. } 一旦你为 父子 grid 都定义了 Models ,下一步就是设 ...
- node-webkit 新建实例窗口间通信问题解决办法
终于弄明白这问题了,只要在js文件里加上段代码,就可解决两窗口间通信问题. var str = { username: User.name, userrole: User.role }; var ne ...
- C#：实现托盘（任务栏图标与托盘图标互斥）
实现托盘(任务栏图标与托盘图标互斥),并且在点击任务栏图标时实现的最小化与点击最小化按钮分离. 具体如下: 1.向窗体上添加如下控件:MenuStrip menuStrip1, NotifyIcon ...
- 以雅酷网为实例从技术上说说dedecms的seo优化要注意哪些？
目前在做雅酷网 ,雅酷卡是雅酷时空公司的产品,我个人感觉用雅酷卡消费还是比较实惠的,而雅酷卡的特色便是雅酷健身卡,很多站长成天的趴电脑上,可以考虑办一张这样的卡,在周末的时候去健身中心活动活动,还是比 ...
- [BIM]BIM中IDM介绍
参考:http://blog.fang.com/25866228/10613454/articledetail.htm IDM的全称是Information Delivery Manual,信息交付手 ...
- c# web 缓存管理
using System; using System.Collections; using System.Text.RegularExpressions; using System.Web; usin ...
- TCP数据流稳定性－－TCP分片,重组及乱序
http://www.cnblogs.com/derekchen/archive/2009/07/15/1524415.html 1.IP分片的情况.IP软件包有一个［分片］和［重组］模块,一个IP数 ...