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变换
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”制作“边框内圆角”的主要内容,如果未能解决你的问题,请参考以下文章
Web 前端技术:CSS3---新属性,浏览器支持度,圆角边框(border-radius),阴影(box-shadow),文字与字体(text-shadow属性word-wrap属性@font-