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:专门应对颜色、长度、宽度、位置等变化的过渡

CSS3 常用属性的更多相关文章

  1. web 开发:CSS3 常用属性——速查手册!

    web 开发:CSS3 常用属性——速查手册! CSS3 简介:http://www.runoob.com/css3/css3-intro.html 1.目录 http://caniuse.com/ ...

  2. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  3. CSS3常用属性

    CSS是我们常用的控制网页样式和布局的一种标准. CSS3是最新的CSS标准. CSS3被拆分为"模块",旧的规范也已经拆分为小的块,同时还增加了新的属性. 一些比较重要的CSS3 ...

  4. CSS3常用属性及效果汇总

    本文转载于<https://blog.csdn.net/lyznice/article/details/54575905> 一.2D效果属性 要使用这些属性,我们需要通过 transfor ...

  5. CSS3常用属性浏览器兼容前缀

    1.检测网站https://gsnedders.html5.org/outliner/ 2.查询是否支持前缀http://caniuse.com 3.border-radius\box-shadow\ ...

  6. CSS3常用属性及用法

    1.transition: 过渡属性,可以替代flash和javascript的效果 兼容性:Internet Explorer 9 以及更早的版本,不支持 transition 属性. Chrome ...

  7. css3新增属性有哪些?css3中常用的新增属性总结

    css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...

  8. CSS3 文本常用属性

    CSS 常用属性 text-shadow属性文字阴影:第一个值背景相对原本文字居左的距离,第二个值据当前文本上方的距离,第三个值清晰度(越小越清晰),第四个值颜色 word-wrap:自动换行,如果是 ...

  9. CSS3动画属性Transform解读

    无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经 烂熟于胸.从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画.限于篇幅 ...

随机推荐

  1. struts2 s2-032漏洞分析

    0x01Brief Description 最近面试几家公司,很多都问到了s2漏洞的原理,之前调试分析过java反序列化的漏洞,觉得s2漏洞应该不会太难,今天就分析了一下,然后发现其实漏洞的原理不难, ...

  2. Python 变量作用域,闭包和装饰器

    from dis import dis b = 6 def f1(a): print(a)print(b) b = 9 f1(3) print(dis(f1)) # dis模块可以查看python函数 ...

  3. input子系统 KeyPad-Touch上报数据格式与机制【转】

    转自:https://www.cnblogs.com/0822vaj/p/4185634.html -------------------------------------------------- ...

  4. dotnet core使用开源组件FastHttpApi进行web应用开发(转)

      FastHttpApi相对于asp.net mvc来说有着更轻量和性能上的优势,性能上面就不在这里介绍了(具体可查看 https://github.com/IKende/FastHttpApi). ...

  5. LightOJ 1348 (树链剖分 + 线段树(树状数组))

    题目 Link 分析 典型的树链剖分题, 树链剖分学习资料 Code #include <bits/stdc++.h> using namespace std; const int max ...

  6. C# IIS站点管理--Microsoft.Web.Administration.dll

    Microsoft中提供了管理IIS7及以上版本一个非常强大的API - Microsoft.Web.Administration.dll,利用该API可以让我们很方便的以编程的方式管理和设定IIS的 ...

  7. js 获取 时间戳的三种方法

    new Date() *1 自动数据类型转换为数字 new Date().getTime() Date.now();

  8. Groovy Closure简介

    什么是闭包(Closure) 在Groovy中,闭包是一段匿名的代码段,它可以有参数,返回值,并且能够赋值给一个变量.闭包中使用的变量可以是在闭包外部定义的,也可以是在闭包内部定义的.

  9. 用Mysql进行emp、dept、salgrade表的相关查询操作

    初学者都会接触到三种表:emp.dept.salgrade表,进行练习各种语句操作再合适不过 但是,网上大多数的操作语句都是用oracle进行操作的,小编在学习mysql的时候,参考网上的书写遇到了不 ...

  10. No grammar constraints (DTD or XML Schema) referenced in the document.

    问题描述 web.xml 使用 Servlet4.0 版本,No grammar constraints (DTD or XML Schema) referenced in the document. ...