CSS3 利用“box-shadow”属性结合“outline”制作“边框内圆角”

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3 利用“box-shadow”属性结合“outline”制作“边框内圆角”相关的知识,希望对你有一定的参考价值。

参考技术A

box-shadow:给元素块添加周边阴影效果。
语法:box-shadow: h-shadow v-shadow blur spread color inset;

*还有另一种情况: box-shadow: 0 2px 2px #FECC84
当我们在色值前只写了三个数值的情况下,则第三个值是 blur (模糊距离)。

利用阴影属性,也可以实现外边框的效果:

当我们再为它添加一个 outline (轮廓),就会发现它实现了-边框内圆角:

* 关于为什么会这样:
outline的描边并不会跟着圆角走,因此显示为直角。

所以把这两者叠加到一起,box-shadow 则刚好填补描边与容器圆角之间的空隙。
*值得注意的是,box-shadow 阴影的大小值并不一定等于描边的宽度,它和圆角的大小有关系。所以只需要一个足够填补空隙的大小就可以了。事实上,制定一个等于描边宽度的值在某些浏览器中可能会渲染异常,所以,最好是稍小的值。

参考书籍: Lea Verou 《CSS揭秘》

CSS中box-shadow属性和2D变换

CSS中box-shadow属性和2D变换_缩放


box-shadow

box-shadow表示盒阴影,可以给元素设置阴影效果,如果我们设置向下的阴影效果:

.wrapper 
position: fixed;
left: 0;
top: 0,
bottom: 0,
right: 0,
background-color: red;
box-shadow: 0 3px 5px rgba(0, 0, 0, .3)

以上box-shadow中的0表示水平偏移,3px表示垂直偏移,5px表示模糊大小,​​rgba(0, 0, 0, 0.3)​​表示投影的颜色。

常用的投影效果主要由偏移、模糊、颜色组成。

无论是投影效果还是盒阴影,光源都默认在左上角,所以水平偏移如果是整数则表示投影偏右,如果是负数则表示投影偏左,同理垂直偏移也是一样。

内阴影

box-shadow中支持​​inset​​关键字,表示阴影向元素内部。

.box 
width: 100px;
height: 100px;
background-color: blue;
box-shadow:inset 3px 3px 5px rgba(0, 0, 0, .6);

.box1
width: 100px;
height: 100px;
background-color: blue;
box-shadow: 3px 3px 5px rgba(0, 0, 0, .6);

box-shadow: 内阴影效果适合实现内嵌效果,表现更低一层的视觉效果。

bobx-shadow:内阴影的水平和垂直偏移方向和外阴影一致,都是左上角光源。

颜色覆盖

box-shadow可以生成的阴影位于文字内容下面,背景颜色的上面,所以我们就可以实现让元素上面覆盖一层颜色。

box-shadow内阴影颜色覆盖是有局限的,对img这样的标签元素时无效的。

容易忽略的地方

box-shadow可以接收2-4个值,前两个值是固定的,分别表示水平偏移和垂直偏移,第三个值表示模糊半径,第四个值表示扩展半径,第四个值日常中很少用到,主要用于两个方面:​​轮廓模拟​​​和​​单侧阴影​​。

轮廓模拟我们可以借助第四个长度值来实现:

.warpper 
background-color: blue;
// 轮廓模拟
box-shadow: inset 0 0 2px #BF56FC;

单侧阴影可以用扩展半径来实现,因为扩展半径支持负值,当我们给模糊半径设置的比较大,就可以看到左右两侧有部分阴影了。

.warpper 
width: 160px;
padding: 15px;
background-color: #fff;
box-shadow: 0 3px 6px rgba(0, 0, 0, .4);

box-shadow还可以实现多边框效果,而且也支持圆角效果。我们只需要多设置几个进行叠加就可以实现。

如果想用box-shadow实现多种css加载效果,我们可以与​​keyframes​​结合,这样动画效果也有。

box-shadow还可以用于动画与性能的优化,例如我们实现一个盒子阴影的过渡效果:

.wrapper 
transition: all .4s;
box-shadow: 0 7px 11px rgba(0, 0, 0, 0.4);


.wrapper:hover
box-shadow: 0 15px 23px rgba(0, 0, 0, 0.8)


css 2D

css2D变换方法有位移、旋转、缩放和斜切。

// 2D 缩放
transform: scale(1)
// 2D 斜切
transform: skew(8deg)
// 2D 旋转
transform: rotate(10deg)
// 2D 位移
transform: translate(6, 7)

rotate

旋转的角度有4中单位:​​deg​​​、​​grad​​​、​​rad​​​、​​turn​​,分别表示角度(degrees)、百分度(grads)、弧度(radians)、圈数(turns)。

百分度(grad):一个梯度,也可以说是一个百分度1/400个整圈,所以100gads等于90deg,它也可以支持负值,表示逆时针方向旋转。

角度(deg):范围是0-360,负值表示逆时针旋转,比如逆时针旋转90度可以用-90deg表示。

弧度(rad): 1弧度等于180/π, 1.5708rad相当于100gads也相当于90deg。

圈数(turn): 1圈等于360度,所以1turn等于360deg

scale

scale()表示缩放,支持x和y两个方向。

// 水平放大3倍,垂直缩小1/4
transform: scale(3, .25);
// 也可以分开写
transform: scaleX(3);
transform: scaleY(.25)

缩放变化不支持百分比值,仅仅支持数值,所以如果我们写成​​scale(155%, 45%)​​​是无效的。但是缩放变化支持负值,实现垂直翻转效果​​transform: scaleY(-1)​​​,实现水平翻转效果​​transform: scaleX(-1)​​​, 如果我们想要水平缩放和垂直缩放的大小一样, 我们可以​​transform: scale(3)​​,这样表示元素在水平方向和垂直方向的尺寸放大2倍。

skew

skew()斜切和scale()缩放一样,也支持x和y两个方向:

// 水平斜切22度,垂直斜切缩33
transform: skew(22deg, 33deg);
// 也可以分开写
transform: skewX(22deg);
transform: skewY(33deg);

transform

transform特征对2d和3d变换都可以使用,当我们无论使用transform什么属性值,这个元素盒模型和位置都不会有任何变化。但是我们需要注意的是元素应用transform变换后,可能因为某些原因还是会影响排版,主要是在触发滚动条的显示和隐藏情况下影响容器的可用尺寸。

对于内联元素无效

内敛元素是无法应用transform变换的,但是这里的内联元素不包括替换元素,而且不支持所有变换特性。

<span>不能变化的元素</span>
span
transform: translateX(88px);

虽然此时span位移效果,但是我们可以通过两种方法来实现位移效果,第一种方法:使用相对定位来实现,第二种:给元素增加块级特性。

不同顺序会有不同效果,我们可以一次性应用多个不同的变换函数,但是我们需要注意即使这些变换内容一样,如果顺序不同效果也会不一样。

transform属性后还有一个不常用的特性变化,当我们创建层叠上下文时: 和opacity属性值不是1的元素类似,如果transform属性值不是​​none​​​,则会创建一个新的层叠上下文。这个特性一般用于两个方面,第一个是:覆盖其他元素,第二个是限制​​z-index: -1​​的层级表现。

以上是关于CSS3 利用“box-shadow”属性结合“outline”制作“边框内圆角”的主要内容,如果未能解决你的问题,请参考以下文章

CSS3属性值之box-shadow

探索 CSS3 中的 box-shadow 属性

CSS3中的box-shadow属性

CSS 有效使用CSS3 box-shadow属性

CSS系列-css3之box-shadow介绍

Web 前端技术:CSS3---新属性,浏览器支持度,圆角边框(border-radius),阴影(box-shadow),文字与字体(text-shadow属性word-wrap属性@font-