从零开始学习前端开发 — 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;
最新文章
- Unity模型导入的若干问题
- table-layout:fixed 属性的解说
- Android MuPDF 部署
- 关于photoshop钢笔工具中各点对应到“贝塞尔曲线”中的含义(cocos2d-x与iOS)
- macos ssh host配置及免密登陆
- jQuery获取Select选中的Text和Value,根据Value值动态添加属性
- Oracle数据库之PL/SQL触发器
- 【转】修改Android工程的名称、安装路径
- Codeforces 691A Fashion in Berland
- UVa 11631 - Dark roads
- React 笔记
- [Sdoi2017]序列计数 [矩阵快速幂]
- T-SQL_select语句详解
- Mysql 截取日期的方法
- 关于IOS下click事件委托失效的解决方案
- 开发人员行走Unix的随身四艺
- Delphi TMemoryStream写入到字符串和字符串写入到流
- .33-浅析webpack源码之doResolve事件流(5)
- unity3d-地图制作之光照贴图Lightmapping
- 【架构】Kubernetes和Spring Cloud哪个部署微服务更好?