从零开始学习前端开发 — 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;

原文地址:https://www.cnblogs.com/witkeydu/p/8271324.html

时间: 2024-11-05 22:03:00

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

从零开始学习前端开发 — 15、CSS3变形基础过渡、动画

一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 eg: transition: all 1s; ident 指定要过渡的css属性列表 eg: transition:border-radius 1s,background 2s; none 没有属性发生过渡 注:我们可以省略滑过状态或其他状态的过渡属性,但是不能省略初始状态的transition属性

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

一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景在边框及边框以内的区域可见 b) padding-box 背景在padding及padding以内的区域可见 c) content-box 背景在content区域可见 二.背景原点: background-origin:padding-box|border-box|content-box; 作用:

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

一.分栏布局 1.设置栏数 column-count:数值; 2.设置每栏的宽度 column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一即可 3.设置栏间距 column-gap:数值+单位; 4.设置栏间隔线 column-rule:5px solid|dashed|dotted black; 5.设置是否跨栏显示 column-span:all(跨栏)|none(不跨栏); 注:a)给需要跨栏显示的元素设置该属性 b) 该属

从零开始学习前端开发 — 3、CSS盒模型

★  盒子模型 (标准的盒模型) css盒模型的概念及组成 css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成(具体如图所示) 1.内容(content) 宽度 width:数值+单位; 高度 height:数值+单位; eg: .box{width:200px;height:100px;} 2.补白或填充 (设置内容和边框之间的距离) 语法:paddi

从零开始学习前端开发 — 7、常见浏览器兼容性问题及图片整合技术

一.常见浏览器兼容性问题 1.双倍浮动bug 描述:块状元素设置了float后,又设置了横向的margin,在IE6下显示的margin值要比设置的值大 解决方案: 给float的元素添加display:inline;将其转换为行内元素 2.表单元素行高不一致 解决方案: 方案一: 给表单元素添加 vertical-align:middle; 方案二: 给表单元素添加 float:left; 3.IE6不识别高度小于10px的容器 解决方案: 方案一: 给元素设置 overflow:hidden

从零开始学习前端开发 — 6、CSS宽高自适应

一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法:height:auto;(等同于不给元素设置高度) 三.最小高度,最大高度,最小宽度,最大宽度 1.最小高度 语法: min-height:数值+单位; 注:IE6不识别min-height属性,解决方案如下: 方案一: min-height:100px; _height:100px; 方案二: m

从零开始学习前端开发 — 5、CSS布局模型

一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元素设置float后会脱离正常的文档流 3.层模型(Layer) 使用position属性对元素进行定位设置 二.定位 语法:position:static(默认值)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位); 1.绝对定位 语法: position:abso

前端是什么?如何系统地学习前端开发?

前端是什么? 工作流程为从UI处得到原型图或者效果图,在项目(网站.微信公众号.小程序.WEBAPP)中还原图片效果,然后与后台进行各种数据交互. 目前的前端市场整体还是处于迅速发展期,市场对于前端的需求也一直比较大.市场对于中高级的前端工程师需求更加迫切,所以就算入了前端的门,也需要不断的提升自己,无论你是学院派,还是培训派,还是自学派,都应该具有强烈的学习意识. 目前入门前端的人群分类 1.计算机相关专业出身系统走过计算机的理论基础,比如计算机组成原理.操作系统原理.计算机网络.算法数据结构

学习前端开发到底有没有发展?

首先,我们来看一下目前前端的市场是怎样的! 我们可以清晰的看到在3月份市场上就有近18万个前端岗位急需人才,各平台的平均薪资在10K~12K 左右. 互联网公司的前端缺口如此之大,以至于HR整天因为找不到人而焦头烂额! 那么为什么现在还有这么多前端的小伙伴抱怨说工作难找呢? 这是因为这些招人的公司所需要的是一个"靠谱的前端". 现在市场缺的都是哪种 " 靠谱的前端 " 呢? 我们先看看国内的大佬们对于前端的技能需求是什么样的. 腾讯: 美团: 从图中可以看到,现在的