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属性有两 ...
随机推荐
- python any()和all()用法
#any(x)判断x对象是否为空对象,如果都为空.0.false,则返回false,如果不都为空.0.false,则返回true #all(x)如果all(x)参数x对象的所有元素不为0.''.Fal ...
- 161206、 Ionic、Angularjs、Cordova搭建Android开发环境
1.jdk 环境变量配置 path:C:\Program Files\Java\jdk1.7.0_79\bin 2.Node.js 因为安装cordova时要用到node.js的npm 下载地址: h ...
- java笔试题整理
exit()是system类的方法,如system.exit(); 如果某个方法是静态的,它的行为就不具有多态性. 类后面没有括号,方法必须要有返回值.如果没有返回值,要写void 构造函数不具有多态 ...
- codeigniter中base_url和site_url
首先在网站中使用如下的语句: site_url(‘manage/articleAdd’): 1 <?php echo site_url('manage/articleAdd');?> ba ...
- win7下80端口被(Pid=4)占用的解决方法
首先介绍一种网上普遍的方法,就是查找占据80端口的进程,然后关闭它就行了. 1.运行cmd,然后输入netstat -a -n -o,回车:2.查看开头几行包含0.0.0.0:80的那一行最后的pid ...
- Prince2的七大原则（5）
[Prince2科普]Prince2的七大原则(5) 按照惯例我们先来回顾一下,PRINCE2七大原则分别是指:持续的业务验证,经验学习,角色与责任,按阶段管理,例外管理,关注产品,剪裁. 第五个原则 ...
- ACM题目————Robot Motion
Description A robot has been programmed to follow the instructions in its path. Instructions for the ...
- sqlite3常用命令&语法
sqlite数据库只用一个文件就ok,小巧方便,所以是一个非常不错的嵌入式数据库,SQLite大量的被用于手机,PDA,MP3播放器以及机顶盒设备. Mozilla Firefox使用SQLit ...
- SlickGrid example 2: 按想要的风格展示列
先上效果图. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...
- hdu4933 Miaomiao's Function
水水的计数题,关键在细节. import java.math.BigInteger; import java.util.Scanner; import java.io.*; public class ...