一、css3圆角: border-radius:数值+单位;

1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等)

2.设置两个值

border-radius:50px 5px; 左上,右下为50px,右上,左下为5px

3.设置三个值

border-radius:10px 50px 20px; 左上为10px,右上,左下为50px,右下20px

4.设置四个值

border-radius:0px 10px 30px 50px;

顺时针方向依次为左上0,右上10,右下30,左下50

5.用/来设置第二组值

border-radius:50px/10px;

第一组值代表水平半径为50px,第二组值代表垂直半径为10px

6.还可以单独设置某一个方向的圆角

border-top-left-radius 左上角

border-top-right-radius 右上角

border-bottom-right-radius 右下角

border-bottom-left-radius 左下角

7.设置为圆形

border-radius:50%; (或 border-radius:100%;)


二、图片边框

1.设置图像边框的路径

border-image-source:url(图片路径);

2.设置图像边框的裁剪位置

border-image-slice:数值;

注:默认中间部分不显示,如果需要显示,添加fill

eg: border-image-slice:27 fill; (设置数值,专指像素)

3.设置图像边框的平铺属性

border-image-repeat:stretch|repeat|round;

stretch 默认值,图像会被拉伸

repeat 图片平铺,碰到边界时会被截断

round 图片平铺,碰到边界会动态调整图片的大小,直至铺满整个容器

eg: border-image-repeat:round stretch;

指水平方向铺满,垂直方向拉伸


三、文本阴影: text-shadow:x轴偏移量 y轴偏移量 模糊度 颜色值;

eg: text-shadow:3px 3px 5px black,5px 5px 8px gray,10px 10px 8px red;

注:x轴偏移量向右为正,向左为负

y轴偏移量向下为正,向上为负

模糊度默认值为0,值越大,模糊度越大,不允许设置负值


四、盒阴影: box-shadow:x轴偏移量 y轴偏移量 模糊度 扩展半径 颜色值;

eg: box-shadow:5px 5px 3px gray,8px 8px 3px #333;

eg: box-shadow:5px 5px 3px black inset;

注:盒阴影分为内阴影和外阴影两种,默认为外阴影,当设置inset时,为内阴影

eg: box-shadow:0 0 5px 10px gray;

注:扩展半径可以为正值也可以为负值


扩展:

设置方向为右的三角:

元素{
width:0;
height:0;
border:30px solid transparent;
border-left-color:blue;
}

设置文本描边:-webkit-text-stroke:3px blue;

从零开始学习前端开发 — 16、CSS3圆角与阴影的更多相关文章

  1. 从零开始学习前端开发 — 11、CSS3选择器

    一.基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二.层次选择器(关系选择 ...

  2. 从零开始学习前端开发 — 17、CSS3背景与渐变

    一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...

  3. 从零开始学习前端开发 — 15、CSS3过渡、动画

    一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...

  4. 从零开始学习前端开发 — 14、CSS3变形基础

    一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...

  5. 从零开始学习前端开发 — 12、CSS3弹性布局

    一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一 ...

  6. 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值

    一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...

  7. 从零开始学习前端开发 — 2、CSS基础

    一.CSS简介  1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...

  8. 从零开始学习前端开发 — 1、HTML基础

    一.web标准 web标准-网页制作的标准,它是由一系列标准组成的,主要包含三个方面:结构(html,xhtml),表现(css),行为(javascript) 注:结构和表现的标准由w3c(万维网联 ...

  9. 从零开始学习前端开发 — 18、BFC

    一. BFC的概念 BFC--block formating context的缩写,中文译为"块级格式化上下文" 二.如何触发BFC 1.设置float除none以外的值(left ...

随机推荐

  1. thinkphp3.2.3使用ajax 的一些坑——使用AjaxReturn()后,直接返回null,模板文件不起作用

    从接触thinkphp到今天,填完此坑,必有其他的坑有会冒出来.哎!这个填坑之路我想是没有尽头的了. 最近,需要使用ajax完成一些操作,一开始想Ajax简单啊,不过是一种提交数据的方式,不过是害苦了 ...

  2. 找回Git中丢失的Commit

    在使用Git的过程中,有时候会因为一些误操作,比如reset.rebase.merge等.特别是在Commit之后又执行了git reset --hard HEAD强制回滚本地记录以及文件到服务器版本 ...

  3. 鸟哥的linux私房菜学习-(五)补充:重点回顾

    为了避免瞬间断电造成的Linux系统危害,建议做为服务器的Linux主机应该加上不断电系统来持续提供稳定的电力: 默认的图形模式登陆中,可以选择语系以及作业阶段.作业阶段为多种窗口管理员软件所提供,如 ...

  4. js设置元素class方法小结及classList相关

        给DOM元素设置class是我们在项目中非常容易遇到的,网上的资料和总结也比较多,下面比较全面的整理一下,希望给到大家一些帮助!并引用两种成熟的classList的兼容方法 一.el.setA ...

  5. 类和对象的创建过程(元类,__new__,__init__,__call__)

    一. type() 1.创建类的两种方式 方式一 class MyClass(object): def func(self,name): print(name) myc = MyClass() pri ...

  6. GBK,UNICODE,GB2312,UTF-8学习总结

    转自http://www.cnblogs.com/pannengzhi/p/5678495.html UNICODE,GBK,UTF-8区别 前言 其实这是个老生常谈的问题了,相信大家在第一次遇到Un ...

  7. 【ASP.NET MVC系列】数据验证和注解

    [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作篇)(下) [04]浅谈ASP. ...

  8. 【干货】分享几个写 demo 的思路

    好久没有动笔,最近发现了一个新的写 demo 的思路,仔细一想,自己仿佛积累了不少写 demo 的思路和想法,总结一下,抛砖引玉. 本文所说 demo 主要分以下三种: 本地 demo 外链 demo ...

  9. gradle学习记录

    一.Gradle简介 Gradle是Android现在主流的编译工具,虽然在Gradle出现之前和之后都有对应更快的编译工具出现,但是Gradle的有时就在于它是亲儿子,Gradle确实比较慢,这和它 ...

  10. SQLAlchemy框架用法详解

    介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DBAPI之上,使用关系对象映射进行数据库操作,简言之便是:将类和对象转换成SQL,然后使用数据API执行SQL并获取执 ...