border-radius | 易学教程

web前端入门到实战：CSS3实现3D动画

阅读更多关于 web前端入门到实战：CSS3实现3D动画

本篇文章给大家带来的内容是关于css实现3d动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助！一、动画属性 1.transform-style: flat | preserve-3d 动画的形式 flat：默认值平面，也就是没有3d效果 preserve-3d：3d效果展示如果要用3D表现，这个属性是必须启用的，当然注意属性要加各种前缀。（这个属性可以把一个处于2维的div变为3d空间，把这个属性比作一个相机的摄像头,这个div内的内容会以3d的形式通过摄像头的形式反馈给你,他的子元素才会享受3d效果,子元素以下的元素就不会有3d效果。） 2.transform-origin：50% 50%; 旋转移动围绕的轴线,默认是中心,可以设left,right,top,bottom,也可以设值数值，这样可以调整旋转移动所围绕的轴线，完成诸如翻页，开门等动作。 (这就相当于你的眼镜啦,位置不同效果也就不同了) 3.perspective 视角值越小，透视距离越近，效果越明显该属性为定义3D变换的元素与视图的距离，也就是透视距离。这个属性应添加到视图元素(变换元素的父元素)上。这是3d动画必备的属性，如果不添加这个属性，则动画会变成平面效果。一般用在舞台元素也就是容器上，这样会让该容器中所用动画元素使用一个视角，这个属性还可以单独用在每个元素中

CSS3(1)---圆角边框、边框阴影

阅读更多关于 CSS3(1)---圆角边框、边框阴影

CSS3(1)---圆角边框、边框阴影 CSS3可以简单理解成是CSS的增强版，它的优点在于不仅有利于开发与维护，还能提高网站的性能。一、圆角边框圆角在实际开放过程中，还是蛮常见的。以前基本是通过背景图片做的，有了CSS3后可以使用简单的属性搞定，可以通过border-radius设置元素的圆角半径。 1、圆角边框语法圆角边框属性 : border-radius 属性值 border-radius: 属性1，属性2，属性3，属性4 # 四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角 border-radius: 属性1，属性2，属性3 # 三个值：上->左右->下 border-radius: 属性1，属性2 # 两个值：上下->左右 border-radius: 属性1 # 一个值：四个圆角值相同对于每个边角也可以单独写 border-top-left-radius:10px; // 定义了左上角的弧度半径为10px border-top-right-radius:5px; // 定义了右上角的弧度5px; border-bottom-right-radius:10px; // 定义了右下角的弧度 border-bottom-left-radius:10px; // 定义了左下角的弧度 2、示例 1）画圆弧 <!DOCTYPE html

注册登录页面模板

阅读更多关于注册登录页面模板

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Practice</title> </head> <style> #register,#login{ width: 300px; height: 400px; border: 1px solid grey; background-color: dimgrey; /*margin: auto;*/ float: left; } .long{ width: 280px; height: 30px; /*边框圆角*/ border-radius: 5px; /*隐藏边框线*/ border: none; margin: 10px; } .short{ width: 180px; height: 30px; border-radius: 5px; border: none; margin: 10px; } .bton{ width: 90px; height: 30px; border-radius: 5px; border: none; color: darkmagenta; background-color: white; } .sub{ width: 280px; height: 30px; margin: 10px; background

---CSS3绘制8种超炫的加载动画

阅读更多关于 ---CSS3绘制8种超炫的加载动画

CSS3绘制8种超炫的加载动画逛前端开发网站的时候，偶尔发现一组非常炫酷的CSS3加载动画，遂迫不及待的做个Demo保存下来。这些加载动画用到了CSS3的旋转transform属性，颜色透明度设置和伪元素操作等CSS技术。奇妙的组合，产生了意想不到的效果。 1.上下起伏波动的加载动画： #loader1, #loader1:before, #loader1:after { background: #f2fa08; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } #loader1:before, #loader1:after { position: absolute; top: 0; content: ''; } #loader1:before { left: -1.5em; } #loader1 { text-indent: -9999em; margin: 50px 50px; position: relative; float: left; font-size: 11px; -webkit-animation-delay: 0.16s; animation-delay: 0.16s; }

CSS3 边框（Borders）

阅读更多关于 CSS3 边框（Borders）

CSS3 Borders 用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。在本章中，您将了解以下的边框属性： border-radius box-shadow border-image 浏览器支持 Internet Explorer 9+ 支持 border-radius 和 box-shadow. Firefox, Chrome, 和 Safari 支持所有最新的 border 属性. 注意：前缀是-webkit-的Safari支持阴影边框。前缀是-o-的Opera支持边框图像。 CSS3 圆角在CSS2中添加圆角棘手。我们不得不在每个角落使用不同的图像。在CSS3中，很容易创建圆角。在CSS3中border-radius属性被用于创建圆角：这是圆角边框！ div { border:2px solid; border-radius:25px; } CSS3盒阴影 CSS3中的box-shadow属性被用来添加阴影: div { box-shadow: 10px 10px 5px #888888; } CSS3边界图片有了CSS3的border-image属性，你可以使用图像创建一个边框： border-image属性允许你指定一个图片作为边框！用于创建上文边框的原始图像：在div中使用图片创建边框:

纯 CSS 实现波浪效果！

阅读更多关于纯 CSS 实现波浪效果！

原文: 纯 CSS 实现波浪效果！一直以来，使用纯 CSS 实现波浪效果都是十分困难的。因为实现波浪的曲线需要借助贝塞尔曲线。而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的，先看看，非 CSS 方式实现的波浪效果。使用 SVG 实现波浪效果借助 SVG ，是很容易画出三次贝塞尔曲线的。看看效果：代码如下： <svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text>  <g id="wave"> <path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z"> <animate dur="5s"

博客园的自定义皮肤

阅读更多关于博客园的自定义皮肤

在折腾的好一阵之后，慢慢的对于园子的样式定制有了一些心得。最终借助李宝亨大大的牛气自定义皮肤终于翻身做主人了。感觉好帅的说，下面简单写一下，具体定义皮肤的方式吧。一、选择博客园模板要选择一个在默认的模板中，对于样式定义较少的模板，这样才对于我们自定义的样式冲击比较小。毕竟园子现在还没有完全开放样式，模板的定义。除非大牛，将设计的模板上传。目前被用于自定义样式使用最多的就是“LessIsMore”这个模板了，应该是这个模板中原式的CSS样式非常少吧。二、设置博文正文的样式样式定义的一个最重要的部分，就是对于文章内部的样式定义，好的样式定义能够让文章的内容和形式让人看起来更加清爽易懂哦。在后台的“常用设置”选项卡中，找到自定义正文的样式的地方。加入自定义的CSS代码，并且勾选“禁用默认CSS” 具体代码如下： /*公用*/ body { font-size:15px; padding:0; margin:0; font-family:"微软雅黑","宋体",Arial; background:#205424 url('http://mat1.gtimg.com/www/mb/theme/qqfs/one_lhj/wrapBg.jpg') no-repeat top center fixed; min-width:1200px; } #home { opacity: 0

Weather with you主题说明

阅读更多关于 Weather with you主题说明

使用前请确保拥有js权限！！！源代码： css： /*广告去死*/ #ad_t2 { display: none !important; } #i-amphtml-fill-content { display: none !important; } #i-amphtml-replaced-content { display: none !important; } #i-amphtml-replaced-content { display: none !important; } #img_ad { display: none !important; } /************************************************** 第一部分：所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。如果不符合你皮肤的要求，你可以在后面通过更高的优先级覆盖着这些样式，但是你不能删除这些样式。 **************************************************/ #EntryTag { margin-top: 20px; font-size: 9pt; color: gray; } .topicListFooter { text-align: right; margin-right: 10px; margin-top:

[CSS3.0] CSS-边框

阅读更多关于 [CSS3.0] CSS-边框

border-radius属性: 定义: 为元素添加圆角边框; 语法: border-radius: 1-4 length|% / 1-4 length|%; JavaScript语法: object.style.borderRadius="5px"; 详细: border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性; 示例: div { border:2px solid; border-radius:25px; } 注释：按此顺序设置每个 radius 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。值描述 length 定义圆角的形状 % 以百分比定义圆角的形状 box-shadow属性: 定义: 给边框添加一个或多个阴影语法: box-shadow: h-shadow v-shadow blur spread color inset; JavaScript语法: object.style.boxShadow="10px 10px 5px #888888" 详细: 示例: div { box-shadow: 10px 10px 5px #888888; } 值描述 h

本人博客样式

阅读更多关于本人博客样式

#site_nav_under { display: none; } .c_ad_block, .ad_text_commentbox { display: none; margin: 0; padding: 0; } #ad_under_google { height: 0; overflow: hidden; } #ad_under_google a { display: none; } @charset "utf-8"; #EntryTag { margin-top: 20px; font-size: 9pt; color: gray; } .topicListFooter { text-align: right; margin-right: 10px; margin-top: 10px; } #divRefreshComments { text-align: right; margin-right: 10px; margin-bottom: 5px; font-size: 9pt; } * { margin: 0; padding: 0; } html { height: 100%; } body { background: url(https://i.loli.net/2017/08/15/59923c58cc40f.jpg) no-repeat fixed;

订阅 border-radius