实现效果如图：

代码如下：

 .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. Redis入门的简单使用

    Redis是什么? redis是一个开源的,面向键/值对的NOSQL的分布式数据库系统 NOSQL指的是非关系型的数据,简单直白地讲就是在非关系型的数据库中不存在表的概念,而是以键值对的方式, 即一个 ...

  2. 关于jpa

    mappedBy 如果不写,会多生成一张id关联表,无论是一对多还是多对多,关联表名为两张原始表连接起来,顺序以字母英文排序 名字为类名的小写复数 被标记的类作为被维护者,写入时,需要以维护者repo ...

  3. 纵观 jBPM：从 jBPM3 到 jBPM5 以及 Activiti5

    https://www.infoq.cn/article/rh-jbpm5-activiti5# 对jBPM来说,今年最大的事件莫过于 jBPM 的创建者Tom Baeyens离开 JBoss 了.T ...

  4. tomcat中间件提交表单数据量过大警告处理方案

    http://www.bubuko.com/infodetail-976418.html http://www.cnblogs.com/yg_zhang/p/4248061.html tomcat中间 ...

  5. DataGridView导出数据到Excel

    //传入DataGridView /// <summary> /// 输出数据到Excel /// </summary> /// <param name="da ...

  6. asp源码微信扫码授权登陆电脑版

    网站接入微信扫码登录并获取用户基本信息(完美绕过微信开放平台)电脑版网站实现微信扫码登录,注册会员还要设密码太麻烦,会员也记不住密码,采用微信扫码登录网站更方便,会员无需设密码,用他的微信做为系统登录 ...

  7. Day74

    Django框架之视图函数(day74)一 作业相关 urlpatterns = [   url(r'^$',views.book),  #根路径,响应到指定视图函数:   .....   url(r ...

  8. Android 开发 上拉加载更多功能实现

    实现思维 开始之前先废话几句,Android系统没有提供上拉加载的控件,只提供了下拉刷新的SwipeRefreshLayout控件.这个控件我们就不废话,无法实现上拉刷新的功能.现在我们说说上拉加载更 ...

  9. Navicat操作SQL server 2008R2文件.bak文件还原

    项目操作过程中,利用Navicat操作SQL Server2008R2数据备份,结果发现数据丢失了很多,不得不先对数据丢失部分进行差异对比,然后再重新输入. 1.利用Navicat导出的数据格式为sq ...

  10. 5.1HTML+CSS制作一颗流星

    效果地址:https://codepen.io/flyingliao/pen/QPKQjB?editors=1100 效果图: HTML code: <div class="sky&q ...