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. go之路

    目录 go初识[第一篇]初识 go初识[第二篇]包.变量.函数

  2. 工作经验-PLSQL连接远程数据库

    复制远程Oracle,tnsnames.ora 放到[D:\OneDrive\PLSQL\instantclient_11_2\network\admin] PLSQL->Tools > ...

  3. 转:Spring历史版本变迁和如今的生态帝国

    Spring历史版本变迁和如今的生态帝国     版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/bntX2jSQfEHy7/article/deta ...

  4. C# - 设计模式 - 钩子模式

    钩子模式 问题场景 如何控制抽象类的行为?解决办法是靠钩子!抽象类公布一个虚方法,由子类自行决定是否重写它,抽象类以钩子做判定,如果返回真则执行某个方法,否则不执行.为什么钩子不能是抽象的,因为如果钩 ...

  5. 2018-2019 20165237网络对抗 Exp5 MSF基础应用

    2018-2019 20165237网络对抗 Exp5 MSF基础应用 实验目标 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 一个主动攻击实践,如 ...

  6. 2018-2019-2 20165234 《网络对抗技术》 Exp0 Kali安装 Week1

    Week1 kali安装 一.下载系统镜像文件 首先下载系统镜像,进入kali官网,在Downloads中选择Download Kali Linux. 我选择的是64位版本,点击HTTP下载镜像文件. ...

  7. Linux服务器查看外网IP地址的命令

    可以直接输入如下几个命令:1.curl ifconfig.me2.curl cip.cc3.curl icanhazip.com4.curl ident.me5.curl ipecho.net/pla ...

  8. Ubuntu下使用Sublime Text 3配置Python开发环境

    因为电脑配置有些低端,所以只能使用Sublime来当作Python的IDE. 1.下载Sublime Text 3并安装 首先去官网找到64位的.tar.bz2的压缩文件下载: 使用命令或归档管理器将 ...

  9. git查日志命令

    git常用命令 1.创建仓库 a.当前目录创建仓库,即把当前目录的文件开始用git管理,该命令会在当前目录下创建一个.git目录 git init b.指定目录创建仓库 git init 目录名 2. ...

  10. CSScript 使用纪要

    CSScript 运行C#脚本的开源项目,在笔者简要使用过程中,遇到了一些问题,现简单记录. 1. CS0433 使用非基本类型 当遇到 CS0433错误,提示 type is defined mul ...