CSS3 radial-gradient 径向渐变属性 实现重复半圆角内边框
aaarticlea/png;base64,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" alt="" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
.box { width:960px; height:500px; margin:0 auto; background:#fd6666; background-size:15px 22px; background-repeat:repeat-y;
background-image:-webkit-radial-gradient(left, circle, #fff 45%, transparent 45%);
background-image:-moz-radial-gradient(left, circle, #fff 45%, transparent 45%); }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
aaarticlea/png;base64,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" alt="" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
.box { width:960px; height:500px; margin:0 auto; background:#fd6666; background-size:15px 22px; background-repeat:repeat-y; background-position:right;
background-image:-webkit-radial-gradient(right, circle, #fff 45%, transparent 45%);
background-image:-moz-radial-gradient(right, circle, #fff 45%, transparent 45%); }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS3 radial-gradient 径向渐变属性 实现重复半圆角内边框的更多相关文章
- H5C3--线性渐变 linear-gradient，径向渐变radial-gradient，重复渐变radial-gradient
一.线性渐变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- CSS3的radial-gradient(径向渐变)
所谓径向渐变,如图下,类似光晕 语法: radial-gradient( [ [渐变大小]? [ at 渐变圆心坐标]? ,]? 颜色[ 开始位置] [,颜色[ 开始位置]]+); ...
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...
- CSS3渐变——径向渐变
上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...
- CSS3之径向渐变
设置最终形状参数: ellipse circle 设置长半轴和短半轴 设置椭圆对称中心 设置色标 输出代码: radial-gradient(circle closest-side at ce ...
- 一款纯css3实现的颜色渐变按钮
之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览 ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- CSS3：radial-gradient，径向渐变的使用方法
语法 径向渐变不同于线性渐变,线性渐变是从“一个方向”向“另一个方向”的颜色渐变,而径向渐变是从“一个点”向四周的颜色渐变.其语法如下: background: radial-gradient(cen ...
- 从零开始学 Web 之 CSS3（三）渐变，background属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- Netty与传统Server对比
前言 本文旨在介绍传统Socket服务端与NIO服务端的差异. 以餐厅服务员简单举例,每个客人对应一个请求. 传统Socket / OIO public class OioServer { @Supp ...
- 【NOIP2016提高组】愤怒的小鸟
https://www.luogu.org/problem/show?pid=2831 BFS 看到N这么小就可以想到搜索,求最少步数显然应该用BFS. 在这题中过两猪可以唯一确定一条抛物线,每一步可 ...
- 【luogu P1186】玛丽卡
https://www.luogu.org/problem/show?pid=1186 考虑暴力,枚举图上每一条边删去后跑Dijkstra,取M次的最大值. 仔细想想就会发现删除最短路以外的边对最短路 ...
- Solr6.5.0配置solrcore图文详解
准备环境: solr6.5.0安装完成 jdk1.8 solrhome配置成功 详情:
- 使用Jenkins自动部署博客
title: 使用Jenkins自动部署博客 toc: true comment: true date: 2017-12-17 19:48:10 tags: ['Jenkins', 'CI'] cat ...
- DOM操作整理
DOM获取 1. 直接获取 document.getElementById("box_id") 通过ID获取 document.getElementsByName("my ...
- selenium webdriver使用click一直失效问题的几种解决方法
想要爬取动态网页,很莫名的click失效.被这个问题困扰了很久,基本上把网上提到的所有方法试遍了,最终终于有个方法成功了,在这里总结一下. 这是我想要点击的网页,初始时实在0.5km上,它的class ...
- 基于lucene.net 和ICTCLAS2014的站内搜索的实现1
Lucene.net是一个搜索引擎的框架,它自身并不能实现搜索.须要我们自己在当中实现索引的建立,索引的查找.全部这些都是依据它自身提供的API来实现.Lucene.net本身是基于java的,可是经 ...
- PMP杂谈--PMP中一些easy忽视的地方
识别干系人:这个过程是持续的,在整个项目的生命周期中都要持续识别干系人. 组织过程资产和事业环境因素:这两个东西在过程的输入中似乎常常看到,但有时候又看不到,不要纠结了 ,不要浪费脑细胞去背诵哪个有, ...
- 【转载】Java系列笔记(1) - Java 类加载与初始化
Java系列笔记(1) - Java 类加载与初始化 原文地址:http://www.cnblogs.com/zhguang/p/3154584.html 目录 类加载器 动态加载 链接 初始化 示例 ...