【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写法规范 选择器 { 属性 :值 : ...
随机推荐
- 【Redis】- 延时任务
引言 在开发中,往往会遇到一些关于延时任务的需求.例如 生成订单30分钟未支付,则自动取消 生成订单60秒后,给用户发短信 对上述的任务,我们给一个专业的名字来形容,那就是延时任务.那么这里就会产生一 ...
- JDK版本Java SE、Java EE、Java ME的区别
想在win7 X64上搭建JAVA开发环境来着(只是尝试下),打开JAVA 官网下载JDK,发现好多版本懵了,百度了下找到这些版本的区别,故有了下文 1.JAVA SE Java2平台标准版(Java ...
- MySQL常用存储引擎功能与用法详解
本文实例讲述了MySQL常用存储引擎功能与用法. MySQL存储引擎主要有两大类: 1. 事务安全表:InnoDB.BDB. 2. 非事务安全表:MyISAM.MEMORY.MERGE.EXAMPLE ...
- Codeforces Round #524 Div. 2 翻车记
A:签到.room里有一个用for写的,hack了一发1e8 1,结果用了大概600+ms跑过去了.惨绝人寰. #include<iostream> #include<cstdio& ...
- Andorid API Package ---> android.app
包名: android.app Added in API level 1 URL:http://developer. ...
- [AHOI2014/JSOI2014]支线剧情 有上下界费用流
---题面--- 题解: 第一眼费用流,,然后想了好久怎么建图,,,最后发现是最小费用可行流的板子题.... 其实还没有很懂这个算法,所以这里只是摆一下步骤,以后再补理解吧. 首先一个思路就是转换图, ...
- 在eclipse中安装html编辑器插件
1.下载插件( 点击下载) 解压后得到GEF-ALL-3.4.1.zip和tk.eclipse.plugin.htmleditor_2.2.0.jar 2.安装GE ...
- Codeforces Round #340 (Div. 2) D
D. Polyline time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...
- 洛谷：P2922 [USACO08DEC]秘密消息（Trie树）
P2922 [USACO08DEC]秘密消息Secret Message 题目链接:https://www.luogu.org/problemnew/show/P2922 题目描述 贝茜正在领导奶牛们 ...
- POJ1904:King's Quest（强连通+思维）
King's Quest Time Limit: 15000MS Memory Limit: 65536K Total Submissions: 10352 Accepted: 3815 题目 ...