当前位置:Gxlcms > css > CSS3圆角、盒阴影与边框图片的具体详解

CSS3圆角、盒阴影与边框图片的具体详解

时间:2021-07-01 10:21:17 帮助过:10人阅读

今天开始整理CSS3的知识

其实应该是昨晚写的,不过好像是急性肠胃炎了,痛的一晚上没睡着,蓝瘦香菇
还好今天打点滴睡一觉就好了,看来这吃东西还是注意点好,被我的胃肠报复了
CSS没什么难的,不过看的同时自己要在浏览器上试一试,试一遍就记住了
光看不做白看


CSS3各个浏览器是存在兼容问题的
不同浏览器有不同前缀的私有属性,表示属性或规则还没有成为标准
换句话说,官方还没公布标准的时候,各个浏览器已经偷摸实现了
但是真正标准未来不一定是什么样子,怎么办,那就加前缀吧
虽然现在新版本浏览器不用加前缀,但保证兼容还是要写

浏览器前缀
chrome/safari-webkit
firefox-moz
IE-ms
opear-o

border-radius圆角

radius这个单词是半径的意思
CSS3之前要想实现这种效果,最好的办法恐怕只能利用Photoshop了
通过这个属性可以给我们的元素加“圆角”
比如我们把一个元素变成圆

<p class="demo"></p>
.demo {    width: 100px;    height: 100px;    background-color: gold;    border-radius: 50%;}

这里写图片描述

为什么值是border-radius属性值是50%就变成了一个圆呢?
凭我们对CSS的理解它一定是一个复合属性它等价border-radius: 50% 50% 50% 50%;
border-radius可以拆分为

  • border-top-left-radius:边框左上角的弧度

  • border-top-rigtht-radius:边框右上角的弧度

  • border-bottom-left-radius:边框左下角的弧度

  • border-bottom-rigtht-radius:边框右下角的弧度

所以它和下面的代码等价,但是我们不要写这么麻烦的

.demo {    width: 100px;    height: 100px;    background-color: gold;    border-top-left-radius: 50%;    border-top-right-radius: 50%;    border-bottom-left-radius: 50%;    border-bottom-right-radius: 50%;}

就拿这个border-top-left-radius: 50%来说

这里写图片描述

实际上它相当于在元素盒的坐上画一个矩形,矩形的宽高就是元素的一半(50%)
并且以靠近元素内部的点为圆心画弧
于是四个属性合在一起,就成了一个圆

这个属性还可以更复杂
下面的代码是等价的

.demo {    width: 100px;    height: 100px;    background-color: gold;    border-top-left-radius: 10px 20px;    border-top-right-radius: 20px 30px;    border-bottom-right-radius: 30px 40px;    border-bottom-left-radius: 40px 50px;}
.demo {    width: 100px;    height: 100px;    background-color: gold;    border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;}

注意顺序是顺时针:左上、右上、右下、左下
这样丧心病狂的写法还真的不常见
子属性看起来是复合属性border-top-left-radius: 10px 20px;
但其实不是,好奇的我尝试了一下发现并没有border-top-left-radius-x这个属性
第一个数字表示矩形x轴方向的距离,第二个数字表示矩形y轴方向的距离,
不要让前面的top-left误导你
css中所有类似属性的都是x轴在前,y轴在后
比如background-position复合属性就是background-position-x在前,background-position-y在后

通过这个好玩的属性,我们可以做半圆

.demo {    width: 200px;    height: 100px;    background-color: orangered;    border-radius: 100px 100px 0 0 / 100px 100px 0 0;}

半圆

做一个叶子

.demo {    width: 200px;    height: 100px;    background-color: greenyellow;    border-radius: 200px 0 200px 0 / 100px 0 100px 0;}

叶子

和我们的padding、margin等复合属性类似

写1个值 border-radius: 10px –> ↖/↗/↘/↙
写2个值 border-radius: 10px 20px –> ↖/↘,↗/↙
写3个值 border-radius: 10px 20px 30px –> ↖,↗/↙,↘
写4个值 border-radius: 10px 20px 30px 40px –> ↖,↗,↘,↙

相信大家懂我的意思

box-shadow盒阴影

我给上面我们写的叶子加一行代码

.demo {    width: 200px;    height: 100px;    background-color: greenyellow;    border-radius: 200px 0 200px 0 / 100px 0 100px 0;    box-shadow: 10px 20px;}

叶子

产生了影子的效果,属性值就是x轴的偏移量和y轴的偏移量
此外还有一些可选的属性值:阴影模糊半径、阴影扩展半径、阴影颜色、投影方式
同时一个盒子可以拥有多个阴影,用逗号隔开就好了

.demo {    width: 200px;    height: 100px;    background-color: greenyellow;    border-radius: 200px 0 200px 0 / 100px 0 100px 0;    box-shadow: 20px 20px 5px 5px green,                40px 40px 5px 5px;}

叶子

至于投影方式默认是外投影,我们可以设置属性值inset变成内投影
比如做一个月食的效果

.demo {    width: 200px;    height: 200px;    background-color: black;    border-radius: 50%;    box-shadow: 40px 40px 0 0 yellow inset;}

月食

border-image边框图片

首先我需要一张作为边框图片的资源

边框

我拿的这张图片的大小是81px*81px
border-image也是一个复合属性,子属性有这些

  • border-image-source:图像来源路径

  • border-image-slice:指定图像的边界向内偏移

  • border-image-repeat:边框图像的平铺方式

  • border-image-width :边框宽度
    (border-image-outset用不上不讲了)

.demo {    width: 54px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png');}

只写一个图片资源样子会很奇怪
图片

我们先加上裁剪属性值

.demo {    width: 54px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png') 27;}

图片
注意它没有单位(默认px),也可以用百分比的形式
这里的27表示对图片四个方向(上右下左)都从外向里裁剪27px变成一个九宫格

九宫格

然后将四个角的图片放到边框的四个角
将剩下的部分(中间的扔掉)拉伸(默认)放到边框余下的位置
如果你想裁剪不同像素,可以分开写

比如border-image: url('border.png') 10% 20% 30% 40%;
九宫格就会被划成这样

九宫格

平铺方式一下有几种

  • stretch 拉伸

  • repeat 平铺

  • round 铺满(拉伸平铺)

默认的就是stretch拉伸
现在我把盒子宽度变为200px,再来比较这三种方式的区别

.demo { /*①拉伸*/
    width: 200px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png') 27 stretch;}

拉伸就是把图片自适应拉开
stretch

.demo { /*②平铺*/
    width: 200px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png') 27 repeat;}

平铺会把裁剪的图片放到中间的位置,然后向两边重复
repeat

.demo { /*③铺满*/
    width: 200px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png') 27 round;}

铺满是拉伸和平铺的结合,不会造成上面的切割效果(毫无违和感)
当然它会尽可能重复多个小方格
round

我们可以再调整边框图片的宽度
比如说我要调整为20px
在裁剪属性值后加‘/’写上要调整的宽度值

.demo {    width: 200px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png') 27/20px round;}

今天这个就不总结了,都在上面了

以上就是CSS3圆角、盒阴影与边框图片的具体详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行