html边框阴影咋设置,css阴影边框怎么设置

2024-05-13 10:09:10

css阴影边框的设置方法：首先新建一个html文件；然后在这个html文件上创建两个【

】用来设置阴影边框；最后这两个div添加样式类为in、out。

本教程操作环境：windows10系统、css3版，DELL G3电脑，该方法适用于所有品牌电脑。

css阴影边框的设置方法：

1、打开前端开发工具，新建一个html文件，然后在这个html文件上创建两个

用来设置阴影边框，最后这两个div添加样式类为: in、out。如图：

代码：

外部边框阴影

内部边框阴影

2、设置边框阴影。对这两个的样式类设置大小，宽高，最后使用box-shadow设置阴影边框。如图：

css代码：

.out,.in{

width:300px;

height: 150px;

border:1px solid #BFBFBF;

margin: 20px auto;

}

.out{

box-shadow:0px 0px 10px 5px #aaa;

}

.in{

box-shadow:0px 0px 10px 5px #aaa inset;

}

3、保存html文件后使用浏览器打开即可看到效果。如图：

4、所有代码。可以直接复制所有代码到新建的html文件上，粘贴保存后使用浏览器打开即可看到效果。

所有代码：

.out,.in{

width:300px;

height: 150px;

border:1px solid #BFBFBF;

margin: 20px auto;

}

.out{

box-shadow:0px 0px 10px 5px #aaa;

}

.in{

box-shadow:0px 0px 10px 5px #aaa inset;

}

外部边框阴影

内部边框阴影

相关教程推荐：CSS视频教程

html边框阴影咋设置,css阴影边框怎么设置相关推荐

html中不显示竖线边框代码,DIV用CSS定义边框为实线，但为什么预览的时候不显示。...
DIV用CSS定义边框为实线,但为什么预览的时候不显示.以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! DIV用CSS定 ...
css外上边距怎么设置,css上边距怎么设置
CSS设置上边距的方法一:使用margin-top属性 margin-top属性可以设置元素的上外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的"空白". ...
html边线设置,css上边线如何设置？
css上边线如何设置?下面本篇文章就来给大家介绍一下使用CSS设置上边线的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以使用border-top属性来设置上边 ...
html中怎么设置渐变颜色设置,css中渐变色怎么设置
这篇文章主要介绍了css3编写浏览器背景渐变背景色的方法,现在分享给大家,也给大家做个参考. css中渐变色怎么设置 css 给网页中的背景设置渐变色,css的渐变颜色可以指定固定的两个颜色之间的线性 ...
设置css阴影和取消css阴影
之前用mui布局样式,但是一直都会有这个阴影,在浏览器调试也调试没用这是设置阴影 /* 长宽模糊度颜色*/ box-shadow: 0 1px 6px #ccc; 取消的话直接设置为0就行了, ...
div右侧阴影代码html,CSS阴影div的所有四个边
这适用于所有浏览器: .allSidesShadow { box-shadow:2px 2px 19px #aaa; -o-box-shadow:2px 2px 19px #aaa; -webkit- ...
仿宋小二在html中怎么设置,CSS 网页中正确设置字体的方法 - 文章教程
现在的 PC 网站中,大多数都是使用的微软雅黑字体,Windows 7 自带了微软雅黑字体,而一些浏览器一般默认也是使用的这种字体,所以即使你不设置默认字体,多数浏览器的用户体验也基本一致,但是总是有 ...
html内外边距怎么设置,css内边距怎么设置？
在前端开发中经常会使用css盒子模型,一般我们会通过css设置width(宽度),padding(内边距),margin(外边距)等属性可以调节整个盒子的大小. 下面我们来看一下设置padding(内 ...
html中的盒子设置时间设置,CSS中的间距设置与盒子模型
备忘:mybatis 3的使用记录这是一篇记录.mybatis是一个部分模仿ORM的framework.是一个介于ORM和原始JDBC的框架.既可以提供ORM的操作对象的特性,又能从详细地控制最终的 ...

最新文章

热门文章