【CSS】凹槽的写法
效果图：
实例代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#btn {
display: block;
width: 100px;
height: 40px;
background-color: lightcoral;
text-align: center;
line-height: 40px;
position: relative;
color: #FFF;
font-size: 2em;
margin: 0 auto;
} #btn::before {
content: "";
width: 30px;
height: 30px;
border-radius: 30px;
background: #fff;
position: absolute;
display: block;
left: -15px;
top: 5px;
}
</style>
</head> <body>
<div id="btn"></div>
</body> </html>
【CSS】凹槽的写法的更多相关文章
- CSS hack的写法
css hack简单的说就是由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致 ...
- 下面css hack的写法分别用于哪些浏览器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- CSS Sprites(基本写法，怎样使用)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/XTQueen_up/article/details/37601361 说白就是用样式表切一个大图片 ...
- CSS三角的写法（兼容IE6）
目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样 ...
- CSS三种写法的优先级
在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...
- CSS浏览器兼容性写法小结
* , ie6,ie7可以识别: _和- , ie6可以识别: !important ,表示高优先级,ie7及以上,firefox都支持,ie6认识带!important的样式属性, ...
- Less 关于css hack的写法
由于工作需要,最近一直在弄css转写less,遇到最多的问题就是 hack的写法,一些IE的hack,less不支持编译: 常见的不支持的hack如下: IE的滤镜写法 \9\0 IE8部分支持 ...
- IE浏览器兼容问题(上)——html和css的兼容写法
用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...
- css学习_写法规范、选择器
1.css(层叠样式表)样式主要目的(让页面更好看些) css尽量不要写内联样式,保证结构和样式分离原则: html专门负责结构,css专门负责样式. 2.css写法规范 选择器 { 属性 :值 : ...
随机推荐
- phpcmsv9 同时调用多个栏目的文章标签
V9版本默认好像没有多栏目调用的标签,例如我用{pc:content action="lists" catid ="6,7,8,9,10" num=" ...
- Qt MetaObject System详解
网上的资源比较乱,该文章整理自地址:http://www.xuebuyuan.com/735789.html Qt meta-object系统基于三个方面: 1.QObject提供一个基类,方便派生类 ...
- sql批量更新关系型数据库
更改gb_groupd里的chargingrulesname的值UPDATE tb_group SET tb_group.chargingrulesname =tb_chargingrules.c ...
- python函数调用关系图（python call graph）
由于要重构项目的部分代码,要整理好主要的函数调用关系,不想自己看代码慢慢画出结构,想找出一种通用的,节省人力的方法得出函数间的调用关系图,于是发现以下几个工具.(内网没装好graphviz,还没真正用 ...
- CenOS shell脚本
1.先查看脚本解释器 [es@bigdata-senior01 ~]$ echo $SHELL /bin/bash 2.编写最简单的脚本 vi test.sh#第一行的脚本声明(#!)用来告诉系统使用 ...
- 【题解】SCOI2008配对
贪心+dp~观察数据,发现一个规律:将数字排序之后,最优匹配只可能产生在该数字和与它距离不超过二的数字之间. 所以可以用dp[i]代表前i个数(排序)匹配的最小差值,之后暴力选出该新数应该如何匹配. ...
- BZOJ3992：[SDOI2015]序列统计——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=3992 https://www.luogu.org/problemnew/show/P3321 小C ...
- BZOJ4873：[SHOI2017]寿司餐厅——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=4873 https://www.luogu.org/problemnew/show/P3749 简要题 ...
- Japan POJ - 3067 转化思维 转化为求逆序对
Japan plans to welcome the ACM ICPC World Finals and a lot of roads must be built for the venue. Jap ...
- AppWidget学习总结
AppWidget学习总结 一.创建AppWidget. 1.在res/xml下创建一个xml文件,以设置widget占用的空间等信息.如widget_provider.xml & ...