CSS 单边 inner box shadow

最新推荐文章于 2024-01-11 07:54:28 发布

原创最新推荐文章于 2024-01-11 07:54:28 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #box-shadow #inset #阴影

CSS 同时被 2 个专栏收录

5 篇文章

订阅专栏

HTML

3 篇文章

订阅专栏

本文介绍如何使用CSS3的box-shadow属性实现元素的内阴影效果，并通过实例展示如何设置阴影的位置及颜色。

CSS3的box-shadow效果，想来大家可能并不陌生，但是一般我们用向外的shadow效果比较多，如果希望得到向内部的阴影效果，怎么实现呢？

很容易，就是加上inset：

.side-shadow {
    -webkit-box-shadow: inset 0 -3px 10px -3px #666666;
       -moz-box-shadow: inset 0 -3px 10px -3px #666666;
            box-shadow: inset 0 -3px 10px -3px #666666;
}

以上的例子中，我们把spread（即最后一个参数）的半径设置为了-3px，这会将阴影挤到一边，所以效果将会是这样：

CSS inner drop shadow on lower side

这样的效果可以用于导航栏，凸显出3D效果，是不是很简单呢？

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

EagleMaze

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

深入了解CSS阴影效果：box-shadow属性详解与实践

a451319296的博客

07-18

3942

本课程将全面介绍CSS中的box-shadow属性，该属性用于为元素添加阴影效果。通过详细解释语法和参数的含义，学习者将了解如何控制阴影的大小、颜色、模糊度、偏移量和内外阴影等。通过丰富的示例和实践，学习者将掌握如何创建各种不同的阴影效果，并能够灵活应用于自己的项目中。无论是想为网页元素增添层次感、增强视觉效果，还是希望提升设计技巧，本课程都将为你提供深入了解和运用box-shadow属性的知识和技能。

Photoshop投影与CSS中box-shadow的转换

12-13

text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-...

参与评论您还未登录，请先登录后发表或查看评论

CSS3阴影 box-shadow的使用和技巧总结

热门推荐

freshlover的专栏

05-28

72万+

text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径阴影扩

浅谈CSS3新特性——文字阴影text-shadow、阴影box-shadow和倒影box-reflect

筱葭的博客

03-01

3635

利用border属性：以下三角为例，把左、右、下边框设置为toumse #triangle { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: yellow green red pink; }

css 内阴影

string佳佳的博客

05-12

7673

效果图：内阴影效果实现： box-shadow: inset 0px 0px 90px 1px rgba(255, 0, 0, 0.2);

内阴影css

qq_46100747的博客

12-15

283

测试5：--内阴影 <div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></div> box-shadow: 0px 0px 10px red inset; 与上面写法相同唯一不同的是添加了一个inset 其它属性与外阴影相同

CSS3中box-shadow的用法介绍

09-25

CSS3中的box-shadow属性是一种非常有用的工具，它可以为网页中的各种元素添加阴影效果，使其看起来更加立体和有深度。这种效果通常用于增加元素的视觉层次感，比如按钮、图片或者任何块级元素。接下来，我们将详细...

精选资源

详解CSS3阴影 box-shadow的使用和技巧总结

01-19

本文讲诉了CSS3阴影 box-shadow的使用和技巧，具体如下： text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及，这一特殊效果使用越来越普遍。基本语法是{box-shadow:...

CSS3属性box-shadow使用指南

09-25

**CSS3属性box-shadow使用指南** `box-shadow`是CSS3中一个强大的样式属性，它允许我们为元素添加阴影效果，提升网页设计的视觉吸引力。这个属性不仅可以在边框外创建阴影，还可以通过`inset`关键字在元素内部创建...

css box-shadow阴影不透明的解决办法

09-25

在网页设计中，CSS的box-shadow属性常被用来为元素添加阴影效果，以增加层次感和立体感。然而，在实际使用box-shadow时，我们可能会遇到一些问题，比如阴影并不是完全透明的效果，而是显示出一定的不透明度。这个...

css内阴影

大风起兮云飞扬

06-28

1701

css内阴影、上、下、左、右内阴影

CSS中的盒子模型

葉無聞

12-09

563

前言在网页布局中，我们的布局对象通常是盒子，而到底什么事盒子？盒子模型有几种？我想这对于做前端开发的来说这至关重要，所以我就对盒子模型的相关知识复习一下，顺便总结出来，以供以后参考。盒子模型 CSS css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。元素框的最内部分...

css设置内嵌样式阴影

最新发布

qingdouxiaohua的博客

01-11

1781

这段代码添加了五个内阴影效果，每个效果都具有相同的偏移量（0 0），模糊度（10px），颜色分别为#f1e227，#b6b70f，#879017，#485b22，#0a272e。这个样式可以让一个元素的边框内部产生阴影效果，可以通过修改偏移量、模糊度和颜色来调整阴影效果的样式。这是一个CSS样式代码，用于为一个元素添加一个内阴影效果。

css设置元素水平垂直居中的方法

yhbsww0523的博客

11-27

3583

看到标题，相信大家并不陌生。这个问题，经常会出现在面试题中。通常会要求面试者写出几种方法。那么，究竟有几种方法，每种方法的兼容情况如何，相信大家很少研究过。今天，我们就一起来看看。通常分为2中情况，已知元素的宽度或未知。我们先说说在已知的情况下，要如何设置。 css设置元素水平垂直居中显示

css 阴影效果

12-07

144

简单的box-shadow单侧双侧投影说明

10-02

683

简单的box-shadow单侧双侧投影说明 window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getEl...

【笔记】学习CSS布局15——inline-box

二木成林

11-30

1479

你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。让我们看下使用这两种方法的例子：困难的方式（使用浮动） <!DOCTYPE html> <html> <head> <style type="text/css"> .box { float:left; ...

box-shadow 属性详解

linhd1102的博客

08-01

3267

box-shadow 是一个 CSS3 属性，它让我们几乎能在任意元素上添加阴影效果，就像我们在设计软件中的可添加的下拉阴影（drop shadow）一样。这种阴影效果让我们能在原本是平面的 2 维页面上创造出立体感。语法 box-shadow 属性接受值最多由五个不同的部分组成。 box-shadow: offset-x offset-y blur spread color positi

css3圆角阴影矩形_CSS3与Photoshop：圆角和阴影

Web design 教程小屋

07-09

777

本教程将演示如何使用几种组合CSS3样式创建漂亮的，简单的导航栏。我们的外观是，过去只能通过合并多个图像，JavaScript和多个div来创建。让我们开始吧… 注意：以下所有示例均已在Mozilla Firefox，Safari和Chrome上进行了测试。如果您想在IE或任何其他浏览器中获得类似的信息，请发表评论，我们将很高兴为您提供帮助。开始之前从网页设计的一开始，美...