CSS3 新特性总结
1.边框
border-radius: 1-4 length|% / 1-4 length|%;
每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。若省略左下角,和右上角相同,省略右下角,左上角相同,省略右上角,和左上角相同。
border-top-left-radius: 20px 50px;
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 水平阴影位置,允许负值。必需
v-shadow 垂直阴影位置,允许负值。必需
blur 模糊距离
spread 阴影大小
color 阴影颜色
inset 从外层的阴影改变阴影内测阴影
box-shadow: 10px 10px 5px 5px #dddddd;
border-image: source slice width outset repeat|initial|inherit;
border-image-source: url(border.png)
用于指定要用于绘制边框的图像
border-image-slice: number | % | fill;
number 数字表示图像的像素或向量的坐标
% 百分比图像的大小是相对的:水平偏移图像的宽度,垂直偏移图像的高度
fill 保留图像的中间部分
指定顶部,右,底部,左边缘的图像向内偏移,分为九个区域:四个角,四边和中间。图像中间部分将被丢弃(完全透明的处理),除非填写关键字。
如果省略第四个,它和第二个相同,省略第三个,它和第一个相同,省略第二个,它和第一个相同
border-image-width: number | % | auto;
图像边界宽度,四个值用于吧border图像区域分为九个部分。代表上,右,底部,左,两侧向内距离。若第四个值被省略,他和第二个是相同的,
第三个省略,和第一个是相同的。如果也省略了第二个,他和第一个是相同的。不允许拥有负值
border-image-outset: length | number;
指定在边框外部绘制 border-image-area 的量,包括上下部和左右部分,若第四个值被省略,他和第二个是相同的,第三个省略,和第一个是相同的。
如果也省略了第二个,他和第一个是相同的。不允许拥有负值
border-image-repeat: stretch | repeat | round | initial | inherit;
stretch 默认值。拉伸图像来填充区域
repeat 平铺图像来填充区域
round 类似repeat。如果无法完整平铺所有图像,则对图像进行缩放以适应区域
space 类似repeat。如果无法完整平铺所有图像,扩展空间会分布在图像周围
initial 将此属性设置为默认值
inherit 从父元素中继承该属性
2.背景
background-image 添加背景图片
background-size 背景图片的大小
background-origin 指定了背景图像的位置区域
background-clip 背景剪裁属性是从指定位置开始绘制
border-box 默认值。
padding-box
content-box
3.渐变
可以再两个或多个指定的颜色之间显示平稳的过渡
线性渐变(Linear Gradients) 向下/向上/向左/向右/对角方向
径向渐变(Radial Gradients) 由它们的中心定义
CSS3 新特性总结的更多相关文章
- 新特性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.背景图像显示的原 ...
- 深入了解css3新特性
深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/
- 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 ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- css css3新特性
css css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
- css3新特性学习系列 -- border
css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius 圆角 支持:IE9+ 用法: border-rad ...
随机推荐
- Public-Key Cryptosystems Based on Composite Degree Residuosity Classes
郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! 以下是对本文关键部分的摘抄翻译,详情请参见原文. 论文未全部翻译 Abstract. 本文研究了一个新的计算问题,即合数剩余阶问题(Com ...
- pandas外部数据的读取构造数据框-文本文件读取(一种utf-8中文编码乱码处理经验)
上面一篇文章有记录pandas构造数据框的方式有二维数组,字典,嵌套的列表和元组等,本篇用于介绍通过外部数据读取的方式来构造数据框. python读取外部数据集的时候,这些数据集可能包含在文本文件(c ...
- 软件工程第二次作业(Junit和GoogleTest)
使用Eclipse的Junit框架进行单元测试 一.前言 我的电脑因为以前学过安卓开发,已经安装好了eclipse,看了邹欣老师的博客,博客上讲的的非常详细,所以在进行的过程中遇到困难,基本都能解决. ...
- 给Django的Admin添加自定义Action 并移除需要选择对象的限制
不得不说,Django的Admin真的给开发带来很多便利,这不,我又来折腾了,这次是添加自定义的action 这个自定义的Action可以看看官方文档的介绍,很详细,不再赘述. https://doc ...
- 兼容低版本IE浏览器的一些心得体会(持续更新)
前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...
- SPFA算法详解
前置知识:Bellman-Ford算法 前排提示:SPFA算法非常容易被卡出翔.所以如果不是图中有负权边,尽量使用Dijkstra!(Dijkstra算法不能能处理负权边,但SPFA能) 前排提示*2 ...
- WPF实现飞控姿态仪表盘控件Attitude dashboard
一.概要 近期项目当中需要用到飞机控制仪表盘的姿态仪,一开始去各大网站搜索解决方案要么就是winfrom要么就是很老的代码根本不能运行更甚者是居然有的还要下载积分. 只能自己手动从0开始写一个控件.这 ...
- 深度优先搜索(DFS)解题总结
定义 深度优先搜索算法(Depth-First-Search),是搜索算法的一种.它沿着树的深度遍历树的节点,尽可能深的搜索树的分支. 例如下图,其深度优先遍历顺序为 1->2->4-&g ...
- Codeforces1312D Count the Arrays 组合数学
题意 给你\(n\)和\(m\),问满足以下条件的数列的个数: 数列长度为\(n\) 数列值域范围为\(\left[1,m\right]\) 数列有且仅有一对相等的数 数列是单峰数列(先严格递增后严格 ...
- [BUUOJ记录] [BJDCTF 2nd]fake google
本题考查python jinjia2的ssti,其实tplmap直接梭哈都可以 随便输入一个值,查看源代码就能看到一个Hint: 用下面的流程图测试一下,看看是什么模板引擎: 用Payload测试之后 ...