从零开始学习前端开发 — 16、CSS3圆角与阴影
一、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圆角与阴影的更多相关文章
- 从零开始学习前端开发 — 11、CSS3选择器
一.基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二.层次选择器(关系选择 ...
- 从零开始学习前端开发 — 17、CSS3背景与渐变
一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
- 从零开始学习前端开发 — 14、CSS3变形基础
一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...
- 从零开始学习前端开发 — 12、CSS3弹性布局
一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一 ...
- 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...
- 从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...
- 从零开始学习前端开发 — 1、HTML基础
一.web标准 web标准-网页制作的标准,它是由一系列标准组成的,主要包含三个方面:结构(html,xhtml),表现(css),行为(javascript) 注:结构和表现的标准由w3c(万维网联 ...
- 从零开始学习前端开发 — 18、BFC
一. BFC的概念 BFC--block formating context的缩写,中文译为"块级格式化上下文" 二.如何触发BFC 1.设置float除none以外的值(left ...
随机推荐
- Linux(CentOS6.5)下编译安装PHP5.6.22时报错”configure: error: ZLIB extension requires gzgets in zlib”的解决方式(确定已经编译安装Zlib,并已经指定Zlib路径)
本文地址http://comexchan.cnblogs.com/,作者Comex Chan,尊重知识产权,转载请注明出处,谢谢! 今天在CentOS6.5下编译安装PHP时,一直报错 confi ...
- Sql Server 里的向上取整、向下取整、四舍五入取整的实例!
http://blog.csdn.net/dxnn520/article/details/8454132 =============================================== ...
- 关于recycleview 滑动item变长(item变形)问题
昨天在做项目的时候出现了bug,表现是在滑动的时候,整个item会被拉长了,松手后就回归正常大小了, 出现这个的主要原因是因为你的item布局中最大的那个根布局是 match_parent状态,因此导 ...
- 视频流GPU解码在ffempg的实现(二)-GPU解码器
1.gpu解码器的基本调用流程 要做视频流解码,必须要了解cuda自身的解码流,因为二者是一样的底层实现,不一样的上层调用 那cuda的解码流程是如何的呢 在https://developer.nvi ...
- Unity 3d游戏逆向及.NET Reflector工具使用介绍
移动平台游戏框架主要有unity 3d和cocos 2d.我们首先得识别游戏使用的框架.识别Unity游戏Android平台的apk包可以直接解压,看是否有./assets/bin/Data/Mana ...
- Integration Services 服务连接失败,拒绝访问以及无法检索数据报错问题
第一个方法比较简单:把域账号添加admin组即可: 第二种方法: 添加域账号到分布式 COM 组 命令提示符下运行 dcomcnfg.exe 下一步 下一步 启动和激活权限 下一步 访问权限 同上设置 ...
- vue2 3d 切换器
空闲时写了一个3d切换器,灵感来自于转行前画3d工程图,效果如图: 功能:按住鼠标中间,变为3d模式,点击6个页面中的某一个页面,页面旋转放大,恢复到2d图形,3d图消失.再次点击鼠标中间,恢复为3d ...
- 教育改革——国家认证 “网红” 编程语言 Python
特大消息!!! 不止是上海计算机二级考试 ,全国计算机考试等级考试也有要求 如果你正打算考计算机等级,那你需要学习以下知识 要求学习的知识太多了,我就不一一在这里展示了! 一.考试改革的目标 据悉 ...
- file上传图片获取路径地址
file上传图片获取路径地址 类似:点击button,选择图片,在对应的输入框input里面显示图片路径地址 类似这样 原理:通过opacity来隐藏原生的input file 然后用.file-bt ...
- 《vue.js2.0从入门到放弃》学习之路
原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...