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属性有两 ...
随机推荐
- SELECT INTO和INSERT INTO SELECT
--自动创建了target_table表,并复制source_table表的数据到target_table select name,age into target_table from source_ ...
- Best Time to Buy and Sell Stock
class Solution { public: int maxProfit(vector<int>& prices) { //eg: 5 6 2 3 1 4: // 记录i之前最 ...
- Recovery with Incremental Backups
During media recovery, RMAN examines the restored files to determine whether it can recover them wit ...
- 将helps.php或者functions.php直接进行了加载
TP3系列中functions.php文件默认其实是空文件,很好找.我们可以直接封装代码. Laravel5系列中的path/vendor/laravel/framework/src/Illumina ...
- 【转】解决svn Authorization failed错误
转载地址:http://blog.sina.com.cn/s/blog_4b93170a0100leb2.html 出现该问题基本都是三个配置文件的问题,下面把这个文件列出来 svnserve.con ...
- java.lang.IllegalThreadStateException
java.lang.IllegalThreadStateException 今天遇到了这个问题.当时的情景是想要循环实现了runable的类和继承Thread类的两个线程.可是没有注意到,继承自Thr ...
- python 使用 redis expire属性设置访问时间间隔
安装redis yum install redis 安装python redis扩展 pip install redis 启动redis,并设定开机自动启动 service redis start c ...
- define与typedef 区别
1) #define是预处理指令,在编译预处理时进行简单的替换,不作正确性检查,不关含义是否正确照样带入,只有在编译已被展开的源程序时才会发现可能的错误并报错.例如:#define PI 3. ...
- 北邀 E Elegant String
E. Elegant String Time Limit: 1000ms Case Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer ...
- 新浪微博模拟登陆+数据抓取(java实现)
模拟登陆部分实现: package token.exe; import java.math.BigInteger; import java.util.Random; import org.apache ...