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 ...
随机推荐
- Python Django CMDB项目实战之-1如何开启一个Django-并设置base页、index页、文章页面
1.环境 win10 python 2.7.14 django 1.8.2 需要用到的依赖包:MySQLdb(数据库的接口包).PIL/pillow(处理图片的包) 安装命令: pip install ...
- 技术债务管理以及Firefox/Chromium的债务评价
如今的软件开发是在遍地敏捷,人人讲唯快不破的时代,哪有人有时间思考代码质量,设计的质量? 哪个又不是从一堆代码中杀出血路来实现还有一个功能?一个产品都存活不了几年,何必考虑什么可维护性? 我们追求进度 ...
- UML总结复习指南
用例图 1. 參与者(Actor) 表示与您的应用程序或系统进行交互的用户.组织或外部系统.用一个小人表示. 2. 用例(Use Case) 用例就是外部可见的系统功能,对系统提供的服务进行描 ...
- this问题
this问题 弹出层是一种很常见的页面显示部件,利用require js的模块化可以使部分功能组件重用性更高.以弹出层为例,探讨关于this的问题 首先来看这样一段代码 Html部分代码 <bo ...
- 微信小程序的Web API接口设计及常见接口实现
微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们 ...
- 数据库——MongoDB——>Java篇
MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系数据库之间的产 ...
- 关于模式识别中的domain generalization 和 domain adaptation
今晚听了李文博士的报告"Domain Generalization and Adaptation using Low-Rank Examplar Classifiers",讲的很精 ...
- eclipse点击空白处自动打开项目
如图 选择上面的 Link with Editor 即可
- 单点登录，session，jsonp（待更新）
单点登录理解: 单点登录系统设计: ajax跨域:
- Android查缺补漏（View篇）--在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0？
在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0 ? @Override protected void onCreate(Bundle savedInstanc ...