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))的更多相关文章

  1. CSS3(1)---圆角边框、边框阴影

    CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...

  2. css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性

    首先我要介绍的是border-radius属性,它的作用是实现圆角边框,其中border-radius:20px;表示,一个’体‘四个角都圆滑20px,其值如果为100px那么圆角度则为最高,如果是正 ...

  3. css3实现圆角边框渐变

    <button class="border">112233</button> 创建button .border{ position: relative; b ...

  4. css3如何实现圆角边框

    圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,灵活性差,也达到降低了网站的整体性能,而圆角边的出现则降低了开 ...

  5. css3新增功能

    CSS3新增功能 1 CSS3选择器详解 1.1 基础选择器 通配选择器* 元素选择器E ID选择器#id CLASS选择器.class 群组选择器select1,selectN 1.2 层次选择器 ...

  6. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

  7. css3新增属性-background背景

    css3新增属性 边框属性 背景属性 文字属性 颜色属性 背景属性 属性 说明 background-image 添加背景图片 background-size 指定背景图像的大小 background ...

  8. CSS3新增特性详解(二)

    上篇博文主要介绍了CSS3新增特性中的静态特性,比如新的选择器.多背景图.阴影.渐变等.本文主要介绍CSS3中新增的动态特性,如过度.动画.变形等. transitian:  -webkit-tran ...

  9. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

随机推荐

  1. 下载Excel文件功能通过火狐浏览器下载没有后缀名

    最近遇到一个问题,用导出Excelwe文件使用Chrome浏览器是没有问题的,但是用火狐浏览器会出现下载的Excel文件没有后缀名.检查了很多东西都没找到原因.最后和之前的下载功能做对比发现,Exce ...

  2. spring-data-neo4j了解

    本项目demo地址[请阅读readme文件]: https://gitee.com/LiuDaiHua/project-neo4j 最近项目上要搭建一个关系图谱的东西,领导给了neo4j和d3两个概念 ...

  3. db2重组所有表和更新表统计信息

    1.构建db2admin模式下的所有表的重组语句: select ' reorg table '||TABLE_NAME||';' from sysibm.tables where  TABLE_SC ...

  4. 基于QRcode的带有文字+图片的二维码的Vue组件

    1 <template> 2 <!-- 生成二维码开放接口: 3 二维码内容[通常为url] 4 二维码大小[限制为正方形] 二维码下方显示:文字 5 二维码中间显示:图片--> ...

  5. 获取年月日格式为yyyy-m-d简单写法

    方法:通过日期函数toLocaleString()获取.new Date().toLocaleString( );  //"2019/9/1 上午11:20:23" 获取年月日方法 ...

  6. IMU预积分

    https://www.sohu.com/a/242760307_715754 http://www.sohu.com/a/243155537_715754 https://www.sohu.com/ ...

  7. ftp服务的安装

    ftp服务的安装 1.环境准备 2.安装服务 3.配置文件 3.1.匿名访问 把以下三个匿名上传写入开启 启动并查看服务状态: Linux客户端访问: Tips: 220表示服务正常,可以登陆:230 ...

  8. [css]等高列的简单实现

    又碰到css等高布局的问题,发现以前没有总结,这里再把基本原理写一下吧. 1.负边距控制法. <div id="content"> <div class=&quo ...

  9. Thread类和Runable接口使用

    不废话,就一个类,直接拷贝代码执行 package com.jtfr.demo; /** * 主要:继承 Thread 类和 Runnable接口 * @author 陈康明 qq:112318152 ...

  10. Foobar 2000增加APE播放支持的方法

    这里说明一下APE,它是一种常用的无损音乐的存储格式,通常会有将原始音乐光盘数字化后存储的APE文件搭配一个CUE文件使用.这个APE存储了音乐的原始数据,而CUE文件则是一个索引文件,用来标记音乐光 ...