css3新特性---(border,Background部分)
boder属性新特性:
border-radius |
设置或检索对象使用圆角边框 |
|
border-top-left-radius |
设置或检索对象左上角圆角边框 |
|
border-top-right-radius |
设置或检索对象右上角圆角边框 |
|
border-bottom-right-radius |
设置或检索对象右下角圆角边框 |
|
border-bottom-left-radius |
设置或检索对象左下角圆角边框 |
|
box-shadow |
设置或检索对象阴影 |
|
border-image |
设置或检索对象的边框样式使用图像来填充 |
|
border-image-source |
设置或检索对象的边框是否用图像定义样式或图像来源路径 |
|
border-image-slice |
设置或检索对象的边框背景图的分割方式 |
|
border-image-width |
设置或检索对象的边框厚度 |
|
border-image-outset |
设置或检索对象的边框背景图的扩展 |
|
border-image-repeat |
设置或检索对象的边框图像的平铺方式 |
border-image:设置或检索对象的边框样式使用图像来填充
<' border-image-source '>:设置或检索对象的边框是否用图像定义样式或图像来源路径。
<' border-image-slice '>:设置或检索对象的边框背景图的分割方式。
<' border-image-width '>:设置或检索对象的边框厚度。
<' border-image-outset '>:设置或检索对象的边框背景图的扩展。
<' border-image-repeat '>:设置或检索对象的边框图像的平铺方式。
[border-radius 圆角]
1、border-radius可以接收8个属性值,分别表示:
X轴(左上、右上、右下、左下角)/Y轴(左上、右上、右下、左下角)
eg: border-radius:10px 20px 30px 40px/10px 20px 30px 40px
2、缩写形式:
只写X轴,Y轴将默认等于X轴;
四个角写不全,默认对角相等;
只写一个值,默认8个数均等;
eg: border-radius:50px 20px;
= border-radius:50px 20px 50px 20px;
= border-radius:50px 20px 50px 20px/50px 20px 50px 20px;
3、当圆角弧度>=正方形边长一半,将会显示为圆形。
[border-image 图片边框]
* 1、border-image:一共可以放10个属性值:
① 图片的路径: url();
② 图片的切片宽度: 4个值,分别代表上、右、下、左四条边;
通过4条切线切割,可以将图片分为9宫格。 9宫格四个角分别对应边框的四个角(不会进行任何拉伸),9宫格四个边分别对应四条边框(会根据设置进行拉伸/铺完/重复等操作)
注意:写的时候,必须不能带px单位!!!!
③ 边框的宽度: 4个值,分别代表上、右、下、左四条边框的宽度;
注意:写的时候,必须带px单位,与切片宽度用/分隔!!!
④ 边框的重复方式: stretch(拉伸)、round(铺满)、repeat(重复)
[round和repeat的区别]
round: 会对四条边进行适当的拉伸压缩,确保四条边可以重复整数次;
repeat:会保持每条边的长度比例不变,可能导致四角处,无法显示一条完整的边;
2、属性值写法: border-image: ① ②/③px ④;
3、 border-image在webkit内核的浏览器中,必须带-webkit-前缀。
[box-shadow 盒子阴影]
1、 6个属性值,空格分隔:
① x轴阴影距离(必选): 可正可负,正——右移,负——左移;
② y轴阴影距离(必选): 可正可负,正——下移,负——上移;
③ 阴影模糊半径(可选):只能为正,默认为0.数值越大,阴影越模糊;
④ 阴影扩展半径(可选):可正可负,默认为0.数值增大,阴影扩大;数值减小,阴影缩小;
⑤ 阴影颜色(可选):默认为黑色
⑥ 内外阴影(可选):默认为外阴影。 inset表示内阴影;
background新增属性
background-origin |
设置或检索对象的背景图像显示的原点 |
|
background-clip |
检索或设置对象的背景向外裁剪的区域 |
|
background-size |
检索或设置对象的背景图像的尺寸大小 |
background-size: 背景图的大小
[指定宽度高度]
宽度高度的指定,可以写px,也可以写%(父容器宽高的百分比)
当写两个属性时,分别表示宽度、高度;
当写一个属性时,表示宽度,高度将会等比缩放;
其他属性值]
contain: 图片等比缩放,直到宽或高中较大的一边缩放到100%为止。(可能导致较短的一边<100%,图片无法盖住全部区域)
cover: 图片等比缩放,直到宽或高中较小的一边缩放到100%为止。(可能导致较大的一边>100%,图片超出区域显示不全)
- background-origin
- 对应的脚本特性为backgroundOrigin。
padding-box:从padding区域(含padding)开始显示背景图像
border-box:从border区域(含border)开始显示背景图像。
content-box:从content区域开始显示背景图像。
css3新特性---(border,Background部分)的更多相关文章
- css3新特性学习系列 -- border
css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius 圆角 支持:IE9+ 用法: border-rad ...
- 新特性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 ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
- HTML5和CSS3新特性
1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- 深入了解css3新特性
深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/
- css3新特性总结
一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...
随机推荐
- Oracle sql 查询结果某一列字段合并成为一条数据
使用oracle中自带函数 wmsys.wm_concat(需合并列的字段名) 用法如下: select code,name,wmsys.wm_concat(baname) from tab gro ...
- kill 和killall----杀死进程
1.根据进程ip查看进程名 Liunx中 通过进程名查找进程PID可以通过 pidof [进程名] 来查找. 反过来 ,通过PID查找进程名则没有相关命令.但在linux根目录中,有一个/proc的 ...
- java8之lambda表达式入门
1.基本介绍 lambda表达式,即带有参数的表达式,为了更清晰地理解lambda表达式,先上代码: 1.1 两种方式的对比 1.1.1 方式1-匿名内部类 class Student{ privat ...
- Linux - 简明Shell编程01 - 第一个脚本(HelloShell)
脚本地址 https://github.com/anliven/L-Shell/tree/master/Shell-Basics 示例脚本及注释 #!/bin/bash echo "hell ...
- Orleans例子再进一步
Orleans例子再进一步 这是Orleans系列文章中的一篇.首篇文章在此 步骤 现在我想再添加一个方法,到IGrains项目内,这个方法里面有个延迟3秒,然后返回一个Task<string& ...
- 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】
在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...
- C语言极易出错的地方(更新中)
1 时刻记住C语言风格的字符串是以'\0'结尾,无论是在内存的分配还是字符串的赋值上都需要注意
- 原创:Docker在云家政的应用 谢绝复制粘贴内容
我们公司目前大规模使用了Docker,目前除了数据库应用,其他所有应用都在Docker容器内运行,下面我就Docker在公司的应用做一些分享.. 首先我介绍一下公司的背景,公司属于中小型创业公司,服务 ...
- 借助VBScript让Windows系统发出声音
借助VBScript让Windows系统发出声音.. 文件I Love You.VBS中的内容是: CreateObject("SAPI.SpVoice").Speak" ...
- 极极极极极简的的增删查改(CRUD)解决方案
去年这个时候写过一篇全自动数据表格的文章http://www.cnblogs.com/liuyh/p/5747331.html.文章对自己写的一个js组件做了个概述,很多人把它当作了一款功能相似的纯前 ...