沉浸式阅读
Beta
转载

css如何实现单边阴影效果

©著作权     黑土 Ai 助手 订阅 CSS教程       2022-08-28       322      0      0      0      2022-08-28
学习要点:本篇文章主要给大家介绍HTML/css单边阴影的具体实现方法。对于HTML/css的初学者来说,边框阴影效果,想必大家都有一定的了解。适当的使用单边阴影效果可以让我们的网页内容更显丰富也更美观。那么在之前的文章中,也

本篇文章主要给大家介绍HTML/css单边阴影的具体实现方法。

对于HTML/css的初学者来说,边框阴影效果,想必大家都有一定的了解。适当的使用单边阴影效果可以让我们的网页内容更显丰富也更美观。那么在之前的文章中,也有给大家介绍过css3边框阴影效果的实现方法。


本节内容我们再详细的给大家介绍html/css单边框阴影效果的实现!

html/css实现单边框阴影的代码示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML/css实现单边框阴影实例</title>
</head>
<style type="text/css">
 .box-shadow {
        width: 200px;
 height: 100px;
 border-radius: 5px;
 border: 1px solid #ccc;
 margin: 20px;
 }
 
    .top {
        box-shadow: 0 -2px 0 red;
 }
 
    .right {
        box-shadow: 2px 0 0 green;
 }
 
    .bottom {
        box-shadow: 0 2px 0 blue;
 }
 
    .left {
        box-shadow: -2px 0 0 orange;
 }
</style>
<body>
<div  class="box-shadow top"></div>
<div  class="box-shadow right"></div>
<div  class="box-shadow bottom"></div>
<div  class="box-shadow left"></div>
 
</body>
</html>


前台访问效果如下:

  1. 上边框阴影:



2.下边框阴影效果:


3.右边框阴影:


4.左边框阴影效果:


四周单边框阴影效果分别显示如上图。

那么实现边框阴影,主要用到的样式属性就是:

box-shadow 属性,表示向框添加一个或多个阴影。

其中第一个参数表示水平阴影的位置、第二个参数表示垂直阴影的位置、第三个参数表示模糊的距离,第四个参数则是阴影的颜色。

注:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

本篇文章就是关于html/css实现单边框阴影效果的方法介绍,非常简单易懂,希望对需要的朋友有一定的帮助!


本文标题: css如何实现单边阴影效果

本文链接: https://mbkfw.com/course/c-1119.html (转载时请注明来源链接)

本文说明: 本文来源于网络转载,有问题请发送至: 邮箱/kf@dtmuban.com 进行修改或删除

特别鸣谢: 如果您觉得本文对您有帮助,请给我们一个小小的赞,收藏本文更利于反复学习哦!

 
本文标签: #css #阴影
destoon程序前端开发标签生成器

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“商企云服”
"模板开发网前端开发教学"
每日干货技术分享
 
0

圈友点评

文明上网理性发言,请遵守网络评论服务协议


色彩
×

《客户实名在线注册登记》售后一直都在!

关注

微信
关注

微信扫一扫
不同的环境体验

幸运大转盘,好礼等您拿

模板开发网公众号

模板开发网微信小程序

代授权

程序
授权

黑小二

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。咨询客服

联系客服:

在线QQ: 290948585

客服电话: 18605917465

E_mail邮箱: kf@dtmuban.com

微信公众号: 商企云服

微信小程序: 模板开发

QQ客服 微信客服DT授权代办 在线交谈 智能小云 黑土AI

工作时间:

周一至周五: 09:00 - 18:00

APP下载

安卓
APK

模板开发网安卓版APP

反馈

我要
反馈