一、效果图：

应用：

二、上代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .effect{

            width: 100%;

            height: 100%;

            padding-top: 50px;

            filter: contrast(10);

            background: #fff;

        }

        .blackball{

            width: 200px;

            height: 100px;

            background: black;

            padding: 10px;

            margin: 0 0 0 240px;

            filter: blur(5px);

        }

        .redball{

            width: 60px;

            height: 60px;

            background: red;

            padding: 10px;

            border-radius: 50%;

            position: absolute;

            top: 11px;

            left: 300px;

            filter: blur(5px);

        }

    </style>

</head>

<body>

    <div class="effect">

        <div class="blackball"></div>

        <div class="redball"></div>

    </div>

</body>

</html>

最重要的就是这个blur 高斯滤波的东西，就是把尖的东西变得平缓（也就实现了两个div接触的尖角就会被平缓，达到平缓上凸的效果）

CSS-好玩的样式（用高斯模糊制作平缓突起）的更多相关文章

  1. 精通CSS+DIV网页样式与布局--制作实用菜单

    在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...

  2. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  3. CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版

    CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...

  4. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  5. [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.

    最近在做Lodop打印功能: 思路是:  用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是:  在打印的JS文件中, 引 ...

  6. #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

    属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

  7. Flex中使用CSS控制页面样式

    Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...

  8. CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

  9. [CSS]cursor鼠标样式

     用css控制鼠标样式的语法如下: <span style="cursor:*">文本或其它页面元素</span>  把 * 换成如下15个效果的一种:   ...

随机推荐

  1. os：获取当前目录路径，上级目录路径，上上级目录路径

    import os '''***获取当前目录***''' print(os.getcwd()) print(os.path.abspath(os.path.dirname(__file__))) '' ...

  2. rust 代码生成选项

    Available codegen options: -C ar=val -- this option is deprecated and does nothing -C linker=val -- ...

  3. 基于NACOS和JAVA反射机制动态更新JAVA静态常量非@Value注解

    1.前言 项目中都会使用常量类文件, 这些值如果需要变动需要重新提交代码,或者基于@Value注解实现动态刷新, 如果常量太多也是很麻烦; 那么 能不能有更加简便的实现方式呢? 本文讲述的方式是, 一 ...

  4. linux环境下搭建Jenkins持续集成（Jenkins+git+shell+maven+tomact）

    准备环境 jenkins.war包 ,jdk1.8  ,tomact , maven,git 1.Jenkins  war包,下载地址https://jenkins.io/zh/download/  ...

  5. WeChair项目Alpha冲刺(4/10)

    团队项目进行情况 1.昨日进展    Alpha冲刺第四天 昨日进展: 前端完成小程序登录态的定义 LoginController编写初步完成同时修改并更新了代码,但是在将编码好的项目部署到服务器上时 ...

  6. Java 中的线程 thread

    一.问:线程有哪些状态? new, runnable, running, waiting, dead 线程状态间的流转 二.问:线程实现方式? 实现 Runnable 接口,然后new Thread, ...

  7. 我们是如何做go语言系统测试覆盖率收集的？

    工程效能领域,测试覆盖率度量总是绕不开的话题,我们也不例外.在七牛云,我们主要使用go语言构建云服务,在考虑系统测试覆盖率时,最早也是通过围绕原生go test -c -cover的能力来构建.这个方 ...

  8. Linux 集群安装zookeeper

    系统:CentOs 7 环境:jdk 8 Zookeeper 下载地址:  http://www-eu.apache.org/dist/zookeeper/stable/ 上传至服务器并解压,本人放在 ...

  9. 尚学堂 216 java中的字节码操作

    所谓的字节码操作就是操作我们已经加载的字节码 接下来我们重点来讲解javaassist类库 使用需要下载jar包,把jar包添加到对应的工程之后 package com.bjsxt.test; pub ...

  10. SQL注入之常用工具sqlmap

    通常来说,验证一个页面是否存在注入漏洞比较简单,而要获取数据,扩大权限,则要输入很复杂的SQL语句,有时候我们还会对大量的URL进行测试,这时就需要用到工具来帮助我们进行注入了. 目前流行的注入工具有 ...