分享好友 教程首页 教程搜索 频道列表

css如何实现单边阴影效果

2022-08-28 02:263160
+关注2
核心提示:本篇文章主要给大家介绍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 #阴影
整理员:网络转载
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

HTML5+CSS3+JS实例之带标题描述的圆角图片手风琴效果

    圆角图片手风琴效果

小黑 HTML教程2024-03-26

纯CSS代码写出各种不规则的形状图形实例展示

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片来切图实现。不过今天给大家分享几十种看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形、圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家。

网络转载 CSS教程2023-10-11

DESTOON9.0自带CSS和JS文件强制刷新功能

    由于浏览器的缓存机制,服务器端修改CSS或JS文件后,用户端不会立即生效,一般需要用户按F5或Ctrl+F5强制刷新,或者等浏览器缓存过期后自动更新。自V9.0,系统在根目录version.inc.php里定义了DT_REVISOR常量来控制C

DESTOON web前端开发2023-09-27

CSS v4.0参考手册

    《CSS在线手册》为官方CSS在线参考手册,本CSS在线开发手册包含了各种css属性、定义、使用方法,实例运行等,是WEB编程学习及开发者不可或缺的在线查询手册!CSS:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)。

网络转载 CSS教程2023-05-10

下一篇
我来说两句
抢沙发