css3新增(圆角边框(border-radius),盒子阴影(box-shadow),文字阴影(text-shadow),背景缩放(background-size))
1.圆角边框 border-radius
border-radius 属性用于设置元素的外边框圆角
语法:border-radius:length;
参数值可以是数值 或者 百分比 的形式
正方形,数值设置宽或高的一半,或者 50%;
矩形,数值设置高度的一半

2.盒子阴影 box-shadow
box-shadow:水平阴影的位置 垂直阴影的位置 模糊距离 阴影尺寸 阴影颜色 外部阴影
模糊距离:影子的虚实
阴影尺寸:影子大小
注意:
1.默认值外阴影(outset),但是不可以写这个单词,否则导致阴影无效
2.盒子阴影不占用空间,不会影响其他盒子排列
3.文字阴影 text-shadow
box-shadow:水平阴影的位置 垂直阴影的位置 模糊距离 阴影颜色 ;
4. 背景颜色 background-size
background-size: 背景图片宽度 背景图片高度;
background-size:500px 200px / 50% / cover / contain; //
1. 如果只写一个参数 肯定是宽度,高度则被省略了,会等比例缩放
2. 里面的单位可以跟 % 相对于父盒子来说的
3. cover 等比例拉伸 要完全覆盖 盒子 可能有部分背景图片显示不全
4. contain 高度和宽度等比例拉伸,当宽度 或者高度 铺满div 盒子就不再进行拉伸了,可能有部分空白区域
css3新增(圆角边框(border-radius),盒子阴影(box-shadow),文字阴影(text-shadow),背景缩放(background-size))的更多相关文章
- CSS3(1)---圆角边框、边框阴影
CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...
- css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性
首先我要介绍的是border-radius属性,它的作用是实现圆角边框,其中border-radius:20px;表示,一个’体‘四个角都圆滑20px,其值如果为100px那么圆角度则为最高,如果是正 ...
- css3实现圆角边框渐变
<button class="border">112233</button> 创建button .border{ position: relative; b ...
- css3如何实现圆角边框
圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,灵活性差,也达到降低了网站的整体性能,而圆角边的出现则降低了开 ...
- css3新增功能
CSS3新增功能 1 CSS3选择器详解 1.1 基础选择器 通配选择器* 元素选择器E ID选择器#id CLASS选择器.class 群组选择器select1,selectN 1.2 层次选择器 ...
- css3新增文本属性
css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...
- css3新增属性-background背景
css3新增属性 边框属性 背景属性 文字属性 颜色属性 背景属性 属性 说明 background-image 添加背景图片 background-size 指定背景图像的大小 background ...
- CSS3新增特性详解(二)
上篇博文主要介绍了CSS3新增特性中的静态特性,比如新的选择器.多背景图.阴影.渐变等.本文主要介绍CSS3中新增的动态特性,如过度.动画.变形等. transitian: -webkit-tran ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
随机推荐
- Android关于界面一定时间无操作自动跳转到指定界面的实现
主要用到的功能,自定义一个定时器CountTimer继承CountDownTimer. public class CountTimer extends CountDownTimer { private ...
- spring整合mybatis后,mybatis一级缓存失效的原因
一般来说,可以在5个方面进行缓存的设计: 最底层可以配置的是数据库自带的query cache, mybatis的一级缓存,默认情况下都处于开启状态,只能使用自带的PerpetualCache,无法配 ...
- oracle10G rac 10.2.0.1升级10.2.0.4
前言 ocr版本查询指令: ocrcheck vote盘路径查询指令: crsctl query css votedisk 相关指令参考来源:http://hzhg12345.blog.163.co ...
- 自从学会了 Array.reduce() ,再也离不开它
(转载)原文链接:https://juejin.im/post/5dfd9d27e51d455825129ec3 在所有后 ES6 时代的数组方法中,我觉得最难理解的就是Array.reduce( ...
- Android功耗评测系列之——软件评测方案原理
软件评测方案也有很多种,但核心原理都是同一个. 软件评测方案中,所有Android功耗的统计都是通过代码进行估算,没有任何实体电路和硬件设备参与统计汇报. 这个配置文件存储在Android ...
- 异常:Error response from daemon: conflict: unable to delete 6fa48e047721 (cannot be forced) - image has dependent child images
在删除镜像之前要先用 docker rm 删掉依赖于这个镜像的所有容器(哪怕是已经停止的容器),否则无法删除该镜像. 停止容器 # docker stop $(docker ps -a | grep ...
- Qt 浅析Q_PROPERTY宏
最近在使用QProperAnimation画类,研究这个的时候看到别人写的代码有用到 Q_PROPERTY()这个宏,然后查了下,这个宏只有Qt才有的 并且需要进行编译,继承于QOBJECT Qt 手 ...
- Map、Filter和Reduce函数(Python)
Map map(function_to_apply, list_of_inputs) 设有以下代码: >>> items = [1, 2, 3, 4, 5] >>> ...
- Python--反射(重点)、面向对象内置方法:如__str__、面向对象的软件开发
复习: Python3统一了类与类型 类的名称空间在定义阶段产生,看名称空间:类.__dict__ Python3特点:可以多继承 Python3都是新式类 继承意义:解决重复代码 组合:也是解决 ...
- 「NOI2017」整数 解题报告
「NOI2017」整数 有一些比较简单的\(\log^2n\)做法 比如暴力在动态开点线段树上维护每个位置为\(0\)还是\(1\),我们发现涉及到某一位加上\(1\)或者减去\(1\)实际上对其他位 ...