CSS3 常用属性
1------border-radius (盒子圆角
border-radius :border-radius:5px 4px 3px 2px; 左上,右上,右下,左下
2------如果将一个正方形盒子 设为圆形:
假设 width 200px height 200px
border 1px solid red;
border-radius:3px; 得出:
将 width;100px height;100px border-radius:3px; 各减一半 那么盒子的圆角就出来了:
盒子 阴影:
box-shadow{box-shadow:x轴偏移量 y轴偏移量 阴影模糊半径(阴影颜色的模糊程度) 阴影扩展半径 阴影颜色 投影方式
注意:inset 是指阴影在盒子内部,默认在外部,inset写到第一个或者最后一个参数位置,其他位置是无效的}
box-shadow:值有3个时,表示距离左侧、距离上侧、影子颜色
值有4个时,表示距离左侧、距离上侧、虚化的像素、影子颜色
颜色RGBA与透明度opcity
|------R:红 G:绿 B:蓝 alpha:透明度的参数
|------RGB的取值范围是0~255/0~100% alpha的取值范围是0~1 不可为负值
|------opcity:范围0-1
渐变颜色
|------background-image: linear-gradient(to bottom,#fff,red);参数说明:第一个参数指定渐变方向 to top,to bottom,to right,to left,to top left......
第二和第三个参数:是指定开始与结束的颜色值 可以有多个颜色background-image: linear-gradient(to bottom,#fff,black,red);
图片
|------图片圆角 border-radius: 50%;(设置椭圆形)
|------设置图片为响应式 max-width: 100%;height: auto;
|------图片阴影 box-shadow
|------图片滤镜 filter
旋转
|------2D transform
|---------rotate()——进行旋转,括号内部写旋转角度,默认顺时针旋转.允许负值,元素将进行逆时针旋转
|---------translate()——从当前位置进行移动,括号内为x,y值。允许负值,将反方向移动
transform:translate(30px,30px):向右30px,向下30px移动,原来位置保存
|---------scale()——改变原始尺寸,按照倍数变化,括号内为width、height的倍数
transform:scale(2,4):宽度变为2倍,高度变为4倍
|---------skew()——水平、垂直方向进行扭转,括号内是水平扭转角度、垂直扭转角度
transform:skew(30deg,0deg);将横向扭转30度的div,内部文字会跟随扭转
transform:skew(0deg,30deg);将纵向扭转30度的div,内部文字会跟随扭转
transform:skew(30deg,30deg);将横向扭转30度、纵向扭转30度的div,内部文字会跟随扭转
|------3D transform
|---------rotateX()——沿水平X轴进行垂直的翻转,括号内写转动度数
|---------rotateY()——沿垂直Y轴进行水平的翻转,括号内写转动度数
|------2D与3D的区别
2D转换跟3D转换的区别:2D转换仅仅在于平面,文字可以看出并没有反过来.3D转换是相当于镜面效果的,进行了前后空间(涉及到了Z轴)的占用进行的翻转。
过渡
|------transition:专门应对颜色、长度、宽度、位置等变化的过渡
转载于:https://www.cnblogs.com/sunchuan88/p/9486382.html
CSS3 常用属性相关推荐
- css2.0圆角,CSS圆角效果-CSS3常用属性集合
CSS3使用注意项:早期的firefox chrome 等某些游览器中也实现了部分CSS3,所以为了兼容部分,在CSS3中的编写,需要如此: {-moz-border-radius: 4px; -we ...
- HTML+CSS+JavaScript复习笔记持更(七)——CSS3常用属性之背景
背景设置 HTML页面中的背景是通过background设置的. 语法格式: <!DOCTYPE html> <html lang="en"> <he ...
- css3常用属性之表现型
css3的使用已经分布在各种网站上,其用途对于前端开发人员来说有很大的帮助,比如之前的圆角矩形,需要使用背景图片来完成,现在只需使用border-radius:5px;便可以做出圆角边框的效果,今天来 ...
- HTML+CSS+JavaScript复习笔记持更(十)——CSS3常用属性之定位
定位 定位主要是用来设定元素在页面上的位置的,其代码为:position 定位有三种定位方式: static(无特殊定位,按照dom排序) absolute(绝对定位,往前面找最近的,有定位属性的元素 ...
- HTML+CSS+JavaScript复习笔记持更(九)——CSS3常用属性之盒模型
盒模型 盒模型是CSS中最最重要的概念之一了,这个概念比较抽象,它规定了元素框处理元素内容.外边距.内边距.边框的方式. 内.外边距的属性 内边距:padding 外边距:margin 边框:bord ...
- HTML+CSS+JavaScript复习笔记持更(六)——CSS3常用属性之文本
文本相关 文本相关,包含了文字样式和文本换行等格式 文字 文字是一个网页最基础的部分,文字主要有以下几种属性: 字体 文字大小 文字颜色 水平对齐方式 段首缩进方式 语法格式: <!DOCTYP ...
- HTML+CSS+JavaScript复习笔记持更(八)——CSS3常用属性之列表
列表属性 之前已经介绍过了列表标签.主要有有序列表和无序列表,为了更好地控制这两种列表,CSS还提供了这两种列表的样式设置. list-style(简写属性,把所有列表的属性设置写到一个声明中) li ...
- CSS3常用属性及用法
1.transition: 过渡属性,可以替代flash和javascript的效果 兼容性:Internet Explorer 9 以及更早的版本,不支持 transition 属性. Chrome ...
- Html5和Css3的基础标签及常用属性
H5 H5的常用标签及属性: 新增和废弃 新增的结构(布局) 标签:section.artcle.nav.footer.header.hgroup.Aside.figure 新增的其他标签: Vide ...
最新文章
- java设计模式---备忘录模式
- shell 输出数据到文本_Linux运维工程师从基础到进阶:Shell变量知识梳理
- c++如何对结构体作为形参设置默认值
- 编写高质量代码:改善Java程序的151个建议(第3章:类、对象及方法___建议36~40)
- 这样理解PWM,想不懂都难!
- 【汇编语言】状态标志符(CF/OF/SF/ZF)在运算(ADD/SUB/ADC/SBB)过程中的响应变化
- 非模式对话框CreateDialog() 与 模式对话框 DialogBoxParam()和...
- linux同时连接内外网的设置
- mysql 地理空间索引_空间索引 - 各数据库空间索引使用报告
- 固态硬盘能不能提高计算机速度,固态硬盘掉速如何解决?几招轻松提升SSD速度方法 (全文)...
- 提升bitcomet下载速度的方法
- 计算机应用期刊投中难吗,计算机应用研究投稿水平高吗
- 论文阅读: Spatial transformer networks
- slack 开源系统_Slack团队聊天的5种开源替代品
- 【滤波跟踪】基于EKF、时差和频差定位实现目标跟踪附matlab代码
- 【看这个篇就够了】95%成为网络安全工程师
- 开关电源matlab仿真设计报告,基于MATLAB的开关电源反馈控制系统的设计和仿真
- 基于Java的留言板系统的设计与实现
- 全网首创Python韩国女团打歌视频卡点自动混剪第1版
- 惠普触控板使用指南_惠普笔记本怎么关触控板?