标签 css 下的文章

1. 去除safari表单自带样式（针对ios）

/*去除safari样式*/
input, button, select ,textarea {  -webkit-appearance:none;  }

2. 消除(chrome) 选中表单组件时的 高亮框

/*去掉选中input的高亮框*/
input:focus, button:focus {outline: none;}
input::-ms-clear {display: none;} /*兼容IE*/

备忘，以前总是用图片素材来实现

效果如图（直男审美，未优化）
QQ截图20190424174747.jpg

完整的源码DEMO

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS气泡</title>
</head>

<style>
body {background: #0086da;  }

.mid {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.bubble {
    background: #fff;
    padding: 11px 14px;
    line-height: 1.4rem;
    position: relative;
    box-shadow: 1px 2px 2px rgba(0,0,0,0.4);
    border-radius: 11px;
    border:2px solid #999;
}
.bubble::before {
    content: '';
    background: #fff;
    position: absolute;
    width: 12px; height: 12px;
    right: -8px;
    top: 11px;
    transform: rotate(45deg);
    border-top: 2px solid #999;
    border-right: 2px solid #999;

}

</style>

<body>

<div class="mid" style="width: 200px">
    <div class="bubble">
        对话框风格的气泡<br/>
        新起一行
    </div>
</div>


</body>
</html>

源码解析

HTML部分

<div class="bubble">
    对话框风格的气泡<br/>
    新起一行
</div>

CSS部分

.bubble {
    background: #fff;
    padding: 11px 14px;
    line-height: 1.4rem;
    position: relative;
    box-shadow: 1px 2px 2px rgba(0,0,0,0.4);
    border-radius: 5px;
    border:2px solid #999;
}
.bubble::before {
    content: '';
    background: #fff;
    position: absolute;
    width: 12px; height: 12px;
    right: -8px;
    top: 11px;
    transform: rotate(45deg);
    border-top: 2px solid #999;
    border-right: 2px solid #999;
}

在 .bubble置入一个同背景色的方块且旋转45度，位移 使其一半外露在泡泡边缘外形成角尖。
注意的两点

  1. bubble需要定义position ，否则尖角无法参考位置定位
  2. 计算尖角的位置要考虑上边框等因素

选择多，好用，简单，免费，未被墙。讲晒!

官网
https://fontawesome.com/

...emm，还是简单备忘下集成步骤

添加到head的CDN:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

也可以下载整个插件到本地，但13M，考虑下自己的带宽资源是否合适

然后到
https://fontawesome.com/icons
搜适合的图标，找到合适的就复制网站提供的代码插入，例如

<i class="far fa-heart"></i>

效果如下
QQ截图20190424135134.jpg

  1. 1
  2. 2