实现效果如图：

代码如下：

 .section {

     margin: 20upx 30upx;

     padding: 40upx;

     border-radius: 6px;

     border-top: #0670C4 solid 6px;

     /* 主要是下面两行 */

     background-color: #FFFFFF;

     box-shadow: #808080 0px 0px 10px;

 }

一个box四周边框阴影的更多相关文章

  1. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  2. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

  3. CSS3(1)---圆角边框、边框阴影

    CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...

  4. flex布局和边框阴影

    "妄"眼欲穿-CSS之flex布局和边框阴影 妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. flex布局 main axis:主轴:cross axis:交叉轴 ...

  5. CSS之flex布局和边框阴影

    flex布局 main axis:主轴:cross axis:交叉轴 容器的子元素自动成为容器成员,成为flex 项目(item) flex容器属性 flex-direction ​ 该属性决定主轴的 ...

  6. css边框阴影

    <style type="text/css">.mydiv{width:250px;height:auto;border:#909090 1px solid;backg ...

  7. css3圆角边框，边框阴影

    border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

  8. Html/CSS前端如何实现文字边框阴影

    上次我们聊了<Html5前端如何实现文字阴影>,其实在开发中现在对于阴影效果的使用已经越来越广泛了,那么今天我们就来说一说用同样的手法实现边框阴影. 一.边框阴影box-shadow 边框 ...

  9. 从零开始学 Web 之 CSS3（二）颜色模式，文字阴影，盒模型，边框圆角，边框阴影

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. php商品对比功能代码分享

    商品对比调用的JS文件(包含了商品对比框浮动JS): /*浮动窗口*/ (function(){     var n=10;   var obj=document.getElementById(&qu ...

  2. Nginx的编译安装及选项

    编译安装Nginx1.安装常见的工具和库(GCC.PCRE.zlib.OpenSSL) Nginx是一个由C语言编写的,所以需要一个编译工具如GNU的GCC[root@www ~]# yum inst ...

  3. Lubuntu下小巧好用的Python编辑工具Geany

    在Lubuntu系统上有很多的Python编辑器,如eclipse,PyCharm等,功能繁多,市场占有率高,但动辄几百M的体积有些巨大,博主今天推荐一款精简且易用的Python开发工具--Geany ...

  4. nginx1.14.0版本location路径配置四种方式

    假设下面四种情况分别用 http://192.168.1.1/proxy/test.html 进行访问. 第一种:location /proxy/ {    proxy_pass http:// 12 ...

  5. MFC如何添加bmp文件和ICO文件

    1.添加BMP格式文件如下图所示: 2.添加ICO格式文件如下图所示:

  6. 五、使用druid管理数据库，mybatis连接mysql数据库

    简介:    使用 mybatis 连接 mysql 数据库, 一套简单的增删改查流程, 前台用 bootstrap, bootstrap-table 框架, 最后用 druid 监控数据库连接情况 ...

  7. [UE4]Drop，扔物品

    一.Drop只要将Grab做的操作反着这一遍就可以:开启模拟物理.取消附加(使用:DetachFromActor方法,同样的rule也需要使用Keep World) 二.

  8. IIS发布ASP.NET Core

    安装IIS.程序和功能--程序卸载--启用或关闭Windows功能 安装.NET Core SDK和Runtime.下载网址 https://www.microsoft.com/net/downloa ...

  9. 8、Zookeeper分布式锁

    基础知识:http://www.cnblogs.com/LiZhiW/p/4931577.html 1 可重入读写锁示例代码如下(lock.acquire加几个,就必须使用几个lock.release ...

  10. 修改Linux主机名

    如果安装时没有设置,一般默认主机名为localhost.localdomain. 通过以下方式修改成自己设置的主机名: 1. vi /etc/sysconfig/network NETWORKING= ...