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. HDU-1171 Big Event in HDU(生成函数/背包dp)

    题意 给出物品种类,物品单价,每种物品的数量,尽可能把其分成价值相等的两部分. 思路 背包的思路显然是用一半总价值当作背包容量. 生成函数则是构造形如$1+x^{w[i]}+x^{2*w[i]}+.. ...

  2. linux下进入root用户登录

    1.打开终端,输入sudo passwd -u root 输入当前用户的登录密码,提示如下标红区域信息 解决方案: 1)直接输入命令:su,输入当前用户登录密码 2)添加sudoers文件的写权限,命 ...

  3. Nodejs一键实现微信内打开网页url自动跳转外部浏览器访问的功能

    前言 现如今微信对第三方推广链接的审核是越来越严格了,域名在微信中分享转发经常会被拦截,一旦被拦截用户就只能复制链接手动打开浏览器粘贴才能访问,要不然就是换个域名再推,周而复始.无论是哪一种情况都会面 ...

  4. Python 中写一个装饰器实现限制频率访问

    1.思路: 首先要在装饰器中确定访问的方法名, 第一次可以访问成功,之后要在规定的时间(变量)之后才可以访问. 初始应该有一个变量为0;访问成功之后把当前的时间赋值给这个变零. 这样再次访问时把当前的 ...

  5. [Kubernetes]容器日志的收集与管理

    在开始这篇文章之前,首先要明确一点: Kubernetes 中对容器日志的处理方式,都叫做 cluster-level-logging ,也就是说,这个日志处理系统,与容器, Pod 以及 Node ...

  6. 共有49款Windows GUI开发框架开源软件 【转】

    源文 : http://www.oschina.net/project/tag/178/gui?lang=36&os=0&sort=view&p=1 桌面应用开发引擎 Allo ...

  7. SSH整合 pom.xml

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  8. day13 Python数据基本类型

    算数运算 / x除以y // 取整除 %返回除法的余数 !=   不等于 <> 不等于 赋值运算 c+= a等价于c=c+a c-= a等价于c=c-a 逻辑运算 and or not 基 ...

  9. C++入门篇十一

    单例对象:为了让类只有一个实例,实例不需要自己释放掉 不管创建多少个实例对象进行访问,访问的都是同一个值 #include "pch.h" #include <iostrea ...

  10. Oracle XDB组件重建说明

    Oracle XDB 组件重建 说明一. XDB 组件说明1.1 官网说明:XDB 全称XML DB,官网的说明如下:http://docs.oracle.com/cd/E11882_01/appde ...