css3新特性学习系列 -- border
css3新特性 border属性(border-radius、border-image、box-shadow)详解
1、border-radius 圆角
支持:IE9+
用法:
border-radius:25px 25px 25px 25px
有四个值,分别表示 top-left、top-right、bottom-right、bottom-left
div
{
border:2px solid;
border-radius:25px 25px 25px 25px; /*可简写为 border-radius:25px */
-moz-border-radius:25px; /* Old Firefox */
}
2、border-image 边框图片
支持:safari5及更早版本,需要前缀 -webkit;oprera需要前缀 -o;
用法:url图片路径; 裁剪位置(支持数值、百分比值),默认单位px,百分比相对于图片而言; stretch为默认值
border-image:url("image/border.png") 27 27 stretch; /*stretch 拉伸*/
border-image:url("image/border.png") 27 27 round; /*stretch 平铺*/
border-image:url("image/border.png") 27 27 repeat; /*repeat重复*/
border-image:url("image/border.png") 27 stretch/round/repeat; /*合并相同的参数*/
注意:必须设置border宽度
实例:
border图片(背景透明)
.border_css3{
width:400px;
height:100px;
text-align:center;
border:27px solid; /*必须设置border宽度*/
border-image:url("image/border (1).png") 27 stretch;/*通用写法 27为裁剪位置 stretch拉伸 round平铺 repeat重复*/
-webkit-border-image: url("image/border (1).png") 27 stretch; /* Safari 和 Chrome */
-moz-border-image: url("image/border (1).png") 27 stretch; /* 老的 Firefox */
-o-border-image: url("image/border (1).png") 27 stretch; /* Opera */ /*IE不支持*/
/*border-radius: 10px;*/
/*box-shadow: 1px 2px 3px #ccc,-1px 2px 3px #ccc,1px -2px 3px #ccc,-1px -2px #ccc;*/
}
效果如下,更详细的解析请移步:http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/
3、box-shadow
支持:IE9+、chrome、opera、safari5.1.1支持
用法:
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:水平阴影的位置,允许负值,必须值;
v-shadow:垂直阴影位置,允许负值,必须值;
blur:模糊距离;
spread:阴影尺寸;
color:阴影颜色;
inset:内阴影;
实例:
.border_css3{
width:400px;
height:100px;
box-shadow:0px 0px 8px 6px rgba(0,0,0,0.8);
}
效果:
css3新特性学习系列 -- border的更多相关文章
- CSS3新特性学习
1.一些实用规范:盒子模型,列表模块,超链接方式,语言模块,背景和边框,文字特效,多栏布局: 2:新增的选择器selctor eg: 1) 子元素过滤伪类:div:first-child (自动识别 ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- css3新特性总结
一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
- java8 新特性学习笔记
Java8新特性 学习笔记 1主要内容 Lambda 表达式 函数式接口 方法引用与构造器引用 Stream API 接口中的默认方法与静态方法 新时间日期 API 其他新特性 2 简洁 速度更快 修 ...
随机推荐
- UVa 11806 Cheerleaders (数论容斥原理)
题意:给定一个n*m的棋盘,要放k个石子,要求第一行,最后一行,第一列,最后一列都有石子,问有多少种放法. 析:容斥原理,集合A是第一行没有石子,集合B是最后一行没有石子,集合C是第一列没有石子,集合 ...
- poj 1474 Video Surveillance 【半平面交】
半平面交求多边形的核,注意边是顺时针给出的 //卡精致死于是换(?)了一种求半平面交的方法-- #include<iostream> #include<cstdio> #inc ...
- centos 允许远程连接mysql
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '123456' WITH GRANT OPTION;
- [Usaco2011 Feb]Generic Cow Protests
Description Farmer John's N (1 <= N <= 100,000) cows are lined up in a row and numbered 1..N. ...
- 51nod 1133 不重叠的线段(贪心)
1133 不重叠的线段 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 收藏 关注 X轴上有N条线段,每条线段有1个起点S和终点E.最多能够选出多少条互不重叠 ...
- 题解报告:hdu 1263 水果
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1263 Problem Description 夏天来了~~好开心啊,呵呵,好多好多水果~~ Joe经营 ...
- 一个简单的jsp+servlet登录界面的总结
这个登录界面我是用eclipse+tomcat7来实现的(网上比较多都是用myeclipse来做的) 1.首先是关于servlet部署的问题 首先你的servlet类要写在WEB-INF的Class文 ...
- DEV—【GridControl添加按钮列】
效果图 打开GridControl的Run Designer在左侧栏中找到: 添加一个ButtonEdit: 更改属性中的值:Caption为按钮上显示的Text:Kind为按钮的类型: 然后拖到最后 ...
- 可以装一把——c#中手动添加控件
TextBox txt = new TextBox(); //文本框控件 //如果想在移动控件位置 point(x,y) txt.Location = new Point(50,50); this.C ...
- was--创建概要文件(典型)
1.第一步 2 .创建 3.创建 4 .典型 5 下一步 6 下一步 7.下一步 8.输入用户和密码,下一步 9.下一步 10.下一步 11.下一步 12.下一步 13.下一步 14.创建 ...