box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset,0 -1px 0 rgba(0,0,0,.2) inset;  因为颜色为透明颜色，所以颜色是什么样的，不用管，只需要调整 水平方向和垂直方向的数值

用css 实现凹陷的线条的更多相关文章

  1. css实现1px 像素线条_解决移动端1px线条的显示方式

    使用CSS 绘制出 1px 的边框,在移动端上渲染的效果会出现不同,部分手机发现1px 线条变胖了,这篇文章整理2种方式实现1px 像素线条. 1.利用box-shadow + transform & ...

  2. css 画竖着线条

    <p>table控制:<!-- height为横线的粗度,width为长度 --><table width=700>     <tr>    <t ...

  3. 使用css实现导航下方线条随导航移动效果

    HTML部分 <ul> <li><a href="">第一条</a></li> <li><a href ...

  4. css 按钮凹陷的感觉

    .login-btn{ margin-top: 60rpx !important; background-color:transparent !important; width: 40%; margi ...

  5. 高阶 CSS 技巧在复杂动效中的应用

    最近我在 CodePen 上看到了这样一个有意思的动画: 整个动画效果是在一个标签内,借助了 SVG PATH 实现.其核心在于对渐变(Gradient)的究极利用. 完整的代码你可以看看这里 -- ...

  6. 【原】移动web点5像素的秘密

    最近和一个朋友聊天,朋友吐露了工作上的一些不开心,说自己总是喜欢跟别人比较,活得比较累,这种感觉大部分人经历过,往往觉得是自己心态不好,其实不然,这是人性,此时应该快速摆脱这种状态,想到DOTA大9神 ...

  7. 移动web点5像素的秘密

    最近和一个朋友聊天,朋友吐露了工作上的一些不开心,说自己总是喜欢跟别人比较,活得比较累,这种感觉大部分人经历过,往往觉得是自己心态不好,其实不然,这是人性,此时应该快速摆脱这种状态,想到DOTA大9神 ...

  8. 移动web点5像素的秘密（转）

    最近和一个朋友聊天,朋友吐露了工作上的一些不开心,说自己总是喜欢跟别人比较,活得比较累,这种感觉大部分人经历过,往往觉得是自己心态不好,其实不然,这是人性,此时应该快速摆脱这种状态,想到DOTA大9神 ...

  9. SVG动画-基础篇

    参考资料: http://www.w3school.com.cn/svg/index.asp https://msdn.microsoft.com/zh-cn/library/gg193979 简介 ...

随机推荐

  1. WPF开发学习笔记

    1.命名规范: 插件名称统一以:CI.Client.Plugins.SYS.+TableName   eg:CI.Client.Plugins.SYS.EnterPrise 2.插件文件目录: 3.D ...

  2. JavaWeb基础—HTML小结

    ---是什么?超文本标记语言---能干什么?描述网页的一种语言---怎么干?一套标签 前端三剑客的关系: 1. HTML是网页内容的载体. 2. CSS样式是表现. 3. JavaScript是用来实 ...

  3. [数据库]_[初级]_[sqlite3简单使用]

    场景 1.sqlite3在很多小型项目都会用到, 比如用来存储Android的联系人,短信等. 这个小巧的sqlite3是文件型的数据库, 也方便做配置文件和程序打包. 使用sql查询也方面. 所以s ...

  4. 【html】标签的分类

    一.标签的分类 1. 块状元素 :  独占一行, 宽高,行高,顶底部边距都可以进行设置 <div> <p> <h1-h6> <ol> <ul> ...

  5. BZOJ 2818 GCD 素数筛+欧拉函数+前缀和

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2818 题意:给定整数N,求1<=x,y<=n且Gcd(x,y)为素数的数对( ...

  6. jsp 中 ， jq 获取当前所点击的 select 的 id 值的注意事项

    因为是使用的 jstl 的 foreach ,所以每个 select 的 id 值都不同,要想在 change 方法中获取到 当前所点击的 select 的 id 值,需要注意的地方有: 1. 得到  ...

  7. UWP 卡片视图 Card View

    上一篇 提到了 UWP 轨道视图Orbit View,这次就说一下卡片视图,毕竟两个差不多. 卡片视图,效果如其名,卡片一样,左右滑动,当然能翻牌最好了. 嗯,我这个可以的额(⊙﹏⊙)... 看下效果 ...

  8. systemctl start nginx timeout

    昨儿个研究docker ,搭建私有仓库.想着用nginx代理一下仓库地址.方式使用80端口,于是愉快的下载,编辑,安装nginx.创建nginx.service作为系统启动服务. 结果......,多 ...

  9. 六种流行的语言大餐---C、C++、python、Java、php、C#你更喜欢哪一个呢？

    引言 鉴于五一期间超大的人流量,LZ思来想去,最终还是选择蜗居在自己的出租屋.无聊之际,当然不能忘了做点什么事情,于是LZ就研究了一下几种语言的皮毛,在这里献丑一翻,希望各位猿友莫要见笑. 不过说来也 ...

  10. Linux之linux基础命令

    一.命令分:内部命令.外部命令① 内部命令:是由 Shell解释器解释的② 外部命令:除了Shell解释器以外的命令③ 识别命令类型:type 命令字 二.命令一般组成格式: 命令字 [选项].. [ ...