一、效果图：

应用：

二、上代码

<!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. Java中的map集合顺序如何与添加顺序一样

    一般使用map用的最多的就是hashmap,但是hashmap里面的元素是不按添加顺序的,那么除了使用hashmap外,还有什么map接口的实现类可以用呢? 这里有2个,treeMap和linkedH ...

  2. 使用git畅游代码的海洋

    如果把互联网上的纷繁代码比作一片海洋,那么git就是在这片海洋上航行的船只,正所谓“水可载舟,亦可覆舟”,git使用恰当可以远征星辰,不然可能会坠入无穷无尽的代码海洋无法自拔.书回正传,我们的征途是星 ...

  3. Ubuntu搭建Java开发环境-刘志敏-专题视频课程

    Ubuntu搭建Java开发环境-3人已学习 课程介绍        主要介绍在Ubuntu环境如何安装Java开发的基本环境课程收益    学会Ubuntu中安装jdk.mysql.maven和id ...

  4. java scoket Blocking 阻塞IO socket通信一

    package bhz.bio; import java.io.IOException; import java.net.ServerSocket; import java.net.Socket; p ...

  5. java8 Optional 类

    package jdk180reduce; import java.util.ArrayList; import java.util.HashMap; import java.util.List; i ...

  6. Python 简明教程 ---10，Python 列表

    微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 程序 = 算法 + 数据结构 -- Nicklaus Wirth 目录 从这句话程序 = 算法 + ...

  7. 逻辑式编程语言极简实现（使用C#） - 1. 逻辑式编程语言介绍

    相信很多朋友对于逻辑式编程语言,都有一种最熟悉的陌生人的感觉.一方面,平时在书籍.在资讯网站,偶尔能看到一些吹嘘逻辑式编程的话语.但另一方面,也没见过周围有人真正用到它(除了SQL). 遥记当时看&l ...

  8. Python实用笔记 （18）面向对象编程——类和实例

    类和实例 面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法,但各 ...

  9. .NET Core下开源任务调度框架Hangfire

    今天无意中发现了一个很好用的任务调度框架.Hangfire作为一款高人气且容易上手的分布式后台执行服务,支持多种数据库.在 .net core的环境中,由Core自带的DI管理着生命周期. 相较于qu ...

  10. 十.总结drf视图

     一.对一个资源的五个操作: 如users资源: 序列化是把模型/表中数据以json格式的数据返回给前端,反序列化是把前端通过http post提交过来的json格式数据(data)插入到数据库. 小 ...