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 ...
随机推荐
- Kotlin 一个好用的新功能：Parcelize
在开发中,如果有需要用到序列化和反序列化的操作,就会用到 Serializable 或者 Parcelable,它们各有优缺点,会适用于不同的场景. Serializable 的优点是实现简单,你只需 ...
- oracle概念
.DDL 数据定义语言 create alter drop truncate .DML 数据操作语言 insert delete update select .TCL 事务控制语言 commit ro ...
- calc() ---一个会计算的css属性
最近这个月一直在赶项目开发,遇到的问题和学到的前端知识没有更新到博客园,现在闲了下来,就整理一下前端知识. 在项目开发中,在样式这方面花费的时间较多,因为针对于数字的变化特别多,本人不爱记数字,在看设 ...
- 毕达哥拉斯树(pythagorasTree)原理解析及canvas动画实现
以前就看到了这个东西,由于太忙了最近才有时间来实现这个; 该文章适合有一定 canvas 基础的人阅读; 首先说说他的原理: The construction of the Pythagoras tr ...
- 关于hash和ico的一些关联
最近測试提出一个bug.说某几个页面中的ico不显示,于是针对此问题排查原因. 首先,确保页面中的link已引入favicon.ico. 经查看,发现是js中的location.hash导致了ico不 ...
- SpringMVC上传图片并压缩及剪切demo
/** * */ package com.up.controller; import java.awt.Image; import java.awt.image.BufferedImage; impo ...
- Error code:1728 Cannot load from mysql.proc. The table is probably corrupted
Error code:1728 Cannot load from mysql.proc. The table is probably corrupted http://bugs.mysql.com/b ...
- 给新手--安装tomcat后username和password设置以及项目怎么部署在tomcatserver上
安装后tomcatserver后.登陆首先就是让输入username和password.但是我们在安装tomcat的过程中好像没有让设置username和password,这时候可能有人就抓狂了.还有 ...
- 基于ASP.MVC票据FormsAuthenticationTicket身份认证
做一个最基础的业务需求用户登录,将此用户的身份发回到客户端的Cookie,之后此用户再访问这个web应用就会连同这个身份Cookie一起发送到服务端.服务端上的授权设置就可以根据不同目录对不同用户的访 ...
- 1.移植uboot-分析uboot启动流程(详解)
本节总结: uboot启动流程如下: 1)设置CPU为管理模式 2)关看门狗 3)关中断 4)设置时钟频率 (FCLK:HCLK:PCLK=1:2:4,FCLK=120Mhz) 5)关mmu,初始 ...