首先我要介绍的是border-radius属性，它的作用是实现圆角边框，其中border-radius：20px;表示，一个’体‘四个角都圆滑20px,其值如果为100px那么圆角度则为最高，如果是正方体则会是一个球，依靠这个属性我们可以不用ps6的情况下，做成一个较为美观的按钮或者控件，它还拥有分别控制4个角的属性border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bottom-right-radius，这对我们控制图型有了更准确的把握。

　　　　然后要详细介绍的是box-shadow属性，向边框添加阴影，其中它有六个重要的参数。

　　　　1.阴影类型：此参数可选，如果不设值，默认的阴影类型是外部阴影，如果取其唯一值“inset”则是内阴影。

　　　　2.h-shadow:必有，阴影的水平偏移位置，其值可以是正负值，为正值，其阴影在对象右边，为负值，其阴影在对象左边。

　　　　3.v-shadow:必有，阴影的垂直偏移位置，其值也可为正负值，为正值，其阴影在对象的底边，为负值，其阴影在对象的上边。

　　　　4.阴影模糊：此参数可选，其值只能为正值，值为0时，表示阴影不具备模糊效果，其值越大则阴影边缘就越模糊。

　　　　5.阴影扩展半径：次参数可选，其值可以是正负值，如果为正，整个阴影都延展扩大，如果为负值，则阴影缩小。

　　　　6.阴影颜色：此参数可选（这个属性我就不加以解释了，就是我们常用的颜色属性）

　　　　这两个属性配合前面学过的transition属性和transform属性，则可以完成一些网站常用的显示样式

　　　　

css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性的更多相关文章

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

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

  2. css3实现圆角边框渐变

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

  3. css3如何实现圆角边框

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

  4. css3圆角边框，边框阴影

    border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

  5. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  6. css3学习总结2--CSS3圆角边框

    绘制一个圆角边框的示例 .div{ border: solid 5px blue; border-radius: 20px; -moz-border-radius:20px; -o-border-ra ...

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

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

  8. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

  9. css3圆角边框

    圆角边框 一.border-radius属性简介   为元素添加圆角边框,可以对元素的四个角进行圆角设置(属性不具有继承性) 二.border-radius定义方法 border-radius属性有两 ...

随机推荐

  1. 【POJ】1819.Disks

    博客园的话插链接链接都是凉的= = 题解 我理解成能不能看到这个圆,除了最后几个圆特殊以外都是等价的,然而我凉了,因为我把圆当成线段来处理,但是,有可能一个圆完全被遮住了,还有一个缝隙,就WA了 计算 ...

  2. 使用Caffe训练适合自己样本集的AlexNet网络模型，并对其进行分类

    1.在开始之前,先简单回顾一下几个概念. Caffe(Convolution Architecture For Feature Extraction-卷积神经网络框架):是一个清晰,可读性高,快速的深 ...

  3. 安装caffe框架所需文件

    安装caffe框架所需文件: 1.微软提供的快速卷积神经网络框架caffe-master安装包或者windows提供的caffe-windows安装包. 链接:http://pan.baidu.com ...

  4. 【Java】 foreach对数组赋值问题

    今天写代码时发现了如下问题: public class Test { public static void main(String[] args) { int[] arr= new int[5]; f ...

  5. Ionic入门三：列表

    列表是一个应用广泛的界面元素,在所有移动app中几乎都会使用到. 列表可以是基本文字.按钮,开关,图标和缩略图等. 列表项可以是任何的HTML元素.容器元素需要list类,每个列表项需要使用item类 ...

  6. JAVAEE——宜立方商城13：订单系统实现、订单生成、Mycat数据库分片

    1. 学习计划 1.订单系统实现 2.订单生成 3.Mycat数据库分片 2. 订单系统 2.1. 功能分析 1.在购物车页面点击“去结算”按钮,跳转到订单确认页面 a) 必须要求用户登录 b) 使用 ...

  7. 1go基本语法

    // week1 project main.go//导入一个包(目录) package main //导入方法 import "fmt" //createMessage函数(参数, ...

  8. [ 原创 ]学习笔记-三种向ListView中填充简单文本的方法

    Android 中ListView是很重要的一块内容 掌握ListView的基本用法 对学习安卓起着举足轻重的作用 今天就介绍一下三种向ListView 填充简单文本的方法 填充其他数据类型的用法之后 ...

  9. android view surfaceView GLSurfaceView

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 表面视图 SurfaceView 是 视图 的子类, 刷新界面速度比 视图 块, 因为它 ...

  10. 最短网络Agri-Net

    [问题描述] 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助.约翰已经给他的农场安排了一条高速的网络线路,他想把这条线路共享给其他农场. ...