<!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/css">body { background: #ededed; width: 900px; margin: 30px auto; color: #999;}p { margin: 0 0 2em;}h1 { margin: 0;}a { color: #339; text-decoration: none;}a:hover { text-decoration: underline;}div { padding: 20px 0; border-bottom: solid 1px #ccc;}.button { display: inline-block; zoom: 1; *display: inline; vertical...
效果看下图： 左右的波浪边框用CSS搞定这个效果。利用CSS radial-gradient() 函数CSS 语法：background: radial-gradient(shape size at position, start-color, ..., last-color);直接上代码如下：<div class="coupon"></div>css部分：.coupon {position: relative;width: 400px;height: 160px;margin: 100px auto;text-align: -webkit-auto;background-image: radial-gradient(circle at 1px 8px,transparent 6px,#ff9e6d 6px,#f...
这个DEMO是使用CSS3制作的一个分步注册表单，每个input对应的是每一步，在表单得到焦点时，对应的step也会进行对应的改变。不过这个效果是使用js代码来实现，但整个表单的外观是由CSS3来完成的，整个案例中使用了：@font-face来制作icon图标，使用gradient来制作渐变的按钮效果，使用text-shadow来制作文字阴影效果等等，方便简单点，但细节与创意才是最重要的，喜欢的同学可以看看是怎么实现的吧1. [文件] index.html <!DOCTYPE H...
由于某些原因，还是要写写前端代码。虽然这不是我的主要责任，但也有表率的必要性。css3这个东西没有什么大难度，难点主要集中在：1）样式比较多2）精准定位3）性能优化其中第2个是日常经常面对的情况。由于对css3并不熟悉，有时候会浪费不少时间来固定一个dom或者一个组件的位置，有点浪费时间。不如干脆多花费一些时间，从头开始学习！以后也可以教教那些新手！原文：https://www.cnblogs.com/lzfhope/p/15225594.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">@-webkit-keyframes bounce-down { 25% { -webkit-transform: translateY(-10px); } 50%, 100% { ...
CSS3中，追加了三个属性选择器分别为： [att*=val]。属性值中有val的元素被选中[att^=val] 属性值中以val 开头的[att$=val] 属性值中以val结束的 如果val为数字则数字前边加反斜杠使属性选择器有通配符的概念 ////伪类选择器 伪元素选择器first-linefirst-letterbeforeafterroot. :root{}not. :not(){}empty. 内容为空白时的样式target. 原文：https://www.cnblogs.com/xiaoqianliu/p/9118458.html
1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法：border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形，数值设置宽或高的一半，或者 50%； 矩形，数值设置高度的一半 2.盒子阴影 box-shadow box-shadow：水平阴影的位置 垂直阴影的位置 模糊距离 阴影尺寸 阴影颜色 外部阴影 模糊距离：影子的虚实 阴影尺寸：影子大小 注意： 1.默认值外阴影（...
CSS3动画 添加某种效果可以从一种样式转变到另一个@keyframes 创建动画 @keyframes move { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }animation 所有动画属性的简写属性，除了 animation-play-state 属性。animation-name 规定 @keyframes 动画的名称。animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。animation-timing-function 规...
#css2中的选择器 1.元素选择器 *通配符选择符、html类型选择符、id选择符、class选择符 2.关系选择器 E F(包含选择器)、E>F(子选择器)、E+F(E元素后面相邻的F选择器) 3.伪类选择器 E:link(链接伪类选择器-默认链接) E:visited(链接伪类选择器-点击过的链接) E:hover(用户操作伪类选择器-鼠标滑过) E:active(用户操作伪类选择器-鼠标点击) E:focus(用户操作伪类选择器-过去光标) E:lang()(:lan...
@font-face语法规则@font-face {font-family: <YourWebFontName>;src: <source> [<format>][,<source> [<format>]]*;[font-weight: <weight>];[font-style: <style>];}说明：YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；format：此值指...
1、实例源码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3的[att*=val]选择器</title> <style type="text/css">[id*=div_border]{background-color:#9F6;width:110px;font-family:微软雅黑;font-size:18p...
columns属性columns属性是一个简写属性column-count属性:定义列的数量column-width属性:定义列的宽度 column-count属性用于设置列的数量或者允许的最大列数auto:默认值，用于表示列的数量由其他css属性决定number:必须是正整数，用于表示定义列的数量 column-width 属性用于设置列的宽度或者列的最小宽度auto:默认值，用于表示列的宽度由其他css属性决定length:必须是正整数，用于表示定义列的宽度 列的间距column-gap 属性用于设置...
1，向上的三角 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>border-radius</title> 6 <style> 7 div{ 8 width:0; 9 height:0;10 border-left:20px solid transparent;11 border-right:20px solid transparent;12 border-bottom:20px solid #ccc;13 }14 </style>15 </head>16 <body>17 <div>18 </div>19 </body>20 </html>2，向下的三角 1 <!doctype html> 2 <html> 3 <head>...
愿你是披荆斩棘的女英雄。 <!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS3-弹跳-效果</title><style>.element{color: #f35626;background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: hue 60s infinite linear;margin-bottom: 1.5rem;font-size: 3rem;font-weight: 100;line-height: 1;letter-spacing: -.05e...
为什么要写自适应的页面（响应式页面）？众所周知，电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，但是如果放到手机上的话，那可能就会乱的一塌糊涂，这时候怎么解决呢？以前，可以再专门为手机定制一个页面，当用户访问的时候，判断设备是手机还是电脑，如果是手机就跳转到相应的手机页面，例如百度的就是，手机访问www.baidu.com就会跳转到m.baidu.com，这样做简直就是费力不讨好的活，...