CSS新内容
margin 外边距 *
margin 属性值最多有4个
* ① 只写一个值:四个方向的margin均为这个值
* ② 写两个值:上 右两个值 下默认=上 右默认=左
* ③ 三个值: 上 右下三个值 左默认=右
* ④ 四个值 上 右 下 左 四个方向
* ⑤ 写三个值加 auto 控件居右显示
* margin: 50px 30px 20px auto;
* margin: 0px auto; 设置控件在父容器中水平居中*/
border
* 三个属性值 宽度width 样式style 颜色color
* 原则上:三个属性都需要手动指定
* */
padding 内边距
* 使用方式:同margin
* 注意:使用padding会将整个控件撑大,使用时需注意控件可视区域的实际大小
[box-shadow 盒子阴影]
* 1、六个属性值,空格分割:
* x轴阴影距离:(必选) 可正可负,正——右移 负——左移
* y轴阴影距离:(必选) 可正可负,正——下移 负——上移
* 阴影模糊半径:(可选) 只能为正,默认为0。数值越大,阴影越模糊
* 阴影扩展半径:(可选) 可正可负,默认为0。数值增大,阴影扩大。数值减小,阴影缩小
* 阴影颜色:(可选) 默认为黑色
* 内外阴影:(可选) 可选值:inset(内阴影) 默认为外阴影
[border-radius 圆角]
* 1、可以接受8个属性值: X轴(左上、右上、右下、左下)/Y轴
* 例如:border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
* 2、只写X轴时,Y轴默认等于X轴。只写左上角,默认=右下角。只写右上角,默认=左下角
* 例如:border-radius: 50px 0px ;
* =border-radius: 50px 0px 50px 0px;
* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
*
* 3、只写一个数,默认8个值均相等。
[border-image 图片边框]
* 1、十个属性:
* ① 图片路径:url()
* ② 图片切片宽度:4个值,分别代表上、右、下、左,四条切线。通过四条切线切割后,会把图片分成九宫格,四个角分别对应边框的四角(不会进行任何拉伸),四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。
* 写的时候,不能带px单位
* ③ 图片边框的宽度:4个值,分别代表上、右、下、左四条边框
* 写的时候,必须带px单位
* ④ 边框背景重复方式:stretch(拉伸)、round(铺满)、repeat(平铺)
* 【铺满和平铺区别】
* 平铺:会保持原有四条边的宽度,进行平铺。可能导致角落处无法显示完整一个图标;
* 铺满:会对四条边进行适当的拉伸压缩,确保可以正好显示完全。
*
* 2、属性值写法:border-image: ① ②/③px ④;
* 第②部分可以只写1个、2个、3个,判断方式同margin
* 常用变换:translate 平移
* scale 缩放
* rotate 定义旋转
* transform可同时进行多种变换,多种变换之间空格分割:
* 例如:transform: scale(1.8,3.0) translateY(0px) rotate();
* transform-origin: 定义变形起点。
* 可选值:left/center/right top/center/bottom
* 或者,直接写X Y轴坐标点。
* 例如:transform: rotate(180deg);
* transform-origin: right bottom;
* 表示,绕左下角,旋转180度。
/*.div1{
width: 300px;
height: 300px;
overflow: hidden;
}
.div1 img{
width: 300px;
height:300px;
}
.div1:hover img{
transform: scale(1.5,5.0) translate(0px,-30px) rotate(360deg);
transition: all 3s ease;
height: 100px;}*/
/*transition
* 1 参与过度的属性,可以单独指定某个CSS属性,也可以all或none
* 2 过渡开始到过渡完成的时间
* 3 过渡的样式函数 长选 esea
* 4 过渡开始前的延迟时间 可以省略
* 5 transition属性可以同时定义多个过渡效果 用逗号分开。*/
CSS动画的使用
* 1 声明一个动画
* @keyframes name{
* from{}
* to{}
* }
* 阶段:
* ① 每个阶段用百分比显示,从0%到100%
* ② 起止必须设置即0%到100%或者from和to
* 2在CSS选择其中,使用Animation动画属性,调用声明好的关键帧。
* Animation缩写顺序:
* Animation-name 动画名称(@keyframes 名称)
Animation-duration 动画持续时间
Animtaion-timing-function动画速度曲线 常选ease
Animtaion-delay 动画延迟时间
Animation-iteration-count 播放次数,默认为1,无限次Infinite
Animation-direction 设置对象动画在循环中是否反向运动 ( Alternate 逆向播放)
* animation-fill-mode 设置对象动画时间之外的状态(forwards: 停留在动画结束状态 backwards:停留在动画开始状态)
>>> 注意animation-name和animation-duration必须设置
>>> animation可以同时设置多个动画 动画之间用,分隔
animation:frame1 .3s,frame2 .5s…
*/
CSS新内容的更多相关文章
- 2017 css新特性
2017年要学习的三个CSS新特性 这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东 ...
- CSS进阶内容—盒子和阴影详解
CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...
- CSS进阶内容—浮动和定位详解
CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...
- Windows cmd 长时间不输出新内容 直到按下ctrl + c 取消或者回车的解决办法
换了一台新电脑, 在使用 ant 拷贝大量文件的时候 cmd 窗口过了很久没有继续输出新的内容,远远超过平时的耗时, 以为已经卡死 按下 ctrl + c 取消, 这时并没有取消, 而是输出了新内容, ...
- Python开发【第十篇】:CSS --无内容点击-不进去(一)
Python开发[第十篇]:CSS --无内容点击-不进去(一)
- 使用CSS为内容设定特定的鼠标样式(cursor)介绍
相信大家都知道我们的鼠标在网页中不同的元素中有不同的显示(例如 a 元素就显示为“箭头指针”),但是其实我们还可以自定义这些有趣的东西哦!今天“畅想资源”就来教大家如何使用CSS为内容设定特定的鼠标样 ...
- 利用css新属性appearance优化select下拉框
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 新内容转入github
所有新内容已经转入 https://github.com/honggzb/Study-General https://github.com/honggzb/Study2016
- jQuery 往table添加新内容有以下四个方法:
Query 添加新内容有以下四个方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() ...
随机推荐
- JavaScript学习12 JS中定义对象的几种方式【转】
avaScript学习12 JS中定义对象的几种方式 转自: http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...
- Java基础——运算符
一.赋值运算符 在前面的学习中,用到最多的是什么呢?就是“=” .例如:int money=1000; //储存本金 使用“=”将数值1000放入变量money的存储空间中.“=”称为赋值运算符. ...
- 3101: N皇后
3101: N皇后 Time Limit: 10 Sec Memory Limit: 128 MBSec Special JudgeSubmit: 88 Solved: 41[Submit][S ...
- yii2.0自带email
大部分框架都有自带的email邮件发送类,yii的邮件发送也很简单,代码如下: 修改配置文件,普通版在(config/web.php).高级版默认配置在/common/config/main-loca ...
- Ef+T4模板实现代码快速生成器
转载请注明地址:http://www.cnblogs.com/cainiaodage/p/4953601.html 效果如图,demo(点击demo可下载案例) 项目结构如图 T4BLL添加BLL.t ...
- (转)Zabbix Agent-Windows平台配置指导
原地址:http://blog.itpub.net/26739940/viewspace-1169538/ zabbix是一个CS结构的监控系统,支持ping,snmp等很多的监控,但是大部分 ...
- nodejs npm常用命令 转
npm是一个node包管理和分发工具,已经成为了非官方的发布node模块(包)的标准.有了npm,可以很快的找到特定服务要使用的包,进行下载.安装以及管理已经安装的包. 1.npm install m ...
- Python快速入门(1)
FROM:实验楼 http://python.usyiyi.cn/python_278/tutorial/index.html http://woodpecker.org.cn/abyteofpyth ...
- mysq常用l性能分析方法
orzdba查看读写./orzdba.pl --mysql -S /data/mysql30001/mysql.sock 语句查看读写命令数量,以及数据库TPS,传输的大小 查看processlist ...
- CDN内容分发网络
CDN的全称是Content Delivery Network,即内容分发网络,其设计思想是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定. CDN系统是在网络 ...