实现效果如图:

代码如下:

 .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. [蓝桥杯]PREV-22.历届试题_国王的烦恼

    问题描述 C国由n个小岛组成,为了方便小岛之间联络,C国在小岛间建立了m座大桥,每座大桥连接两座小岛.两个小岛间可能存在多座桥连接.然而,由于海水冲刷,有一些大桥面临着不能使用的危险. 如果两个小岛间 ...

  2. ES - es为什么要移除type?

    1.index.type的初衷 之前es将index.type类比于关系型数据库(例如mysql)中database.table,这么考虑的目的是“方便管理数据之间的关系”. 2.为什么现在要移除ty ...

  3. window7 修改docker安装的machine 位置

    win7下安装docker ,默认的machine location 是在C:\users\xx\.docker\machine\machines 下面,为了不占用系统盘,想修改盘符位置 google ...

  4. vim替换的两种方式

    最近操作一个超过30MB的一个文本文件,常用的编辑器打开就死.最后使用Vim,一路非常顺畅.不愧是久经历史考验的编辑器. 如何在Vim中将空格更换为\t 这个使用\s功能.具体命令为:\s\ \/t/ ...

  5. Windows编程1

    一个最简单的windows必须包括两个函数: 1.入口函数:WinMain 2.窗口过程回调函数:WndProc 结构如下: #include <windows.h> //窗口过程回调函数 ...

  6. centos7 安装远程桌面

    https://www.linuxidc.com/Linux/2017-09/147050.htm https://blog.csdn.net/dazhi_1314/article/details/7 ...

  7. 复习python(条件判断、循环、字符串格式化)

    1.条件判断: 只有一种 if: *** elif:#多个条件加elif,想加几个加几个 **** else: **** python里靠缩进来表示表示语句块,见到冒号,下行就要缩进 2.循环 两种, ...

  8. Postman Could not get any response

    在使用postman时遇到的小问题,记录一下: 报错信息如下: Could not get any response There was an error connecting to https:// ...

  9. JAVA分布式优惠券系统后台 手把手实战开发(买的,完整)

    扫码关注,回复 “java分布式优惠券”,免费领取.本资源是本人花几十块买的,完整.

  10. Linux进阶指令(重点)

    三.Linux进阶指令(重点) 1.df指令    作用:查看磁盘的空间 #df -h 选项:-h    表示以可读性较高的形式展示大小 2.free指令     作用:查看内存使用情况 #free ...