border-radius | 易学教程

CSS3中的border-radius

阅读更多关于 CSS3中的border-radius

以前在CSS2的基础上做圆角还能算得上是门学问！！各种图片、各种嵌套（《精通CSS——高级web标准解决方案》中有介绍，过程在这就不说了，网上一查就查得到，总之就是：没用CSS3之前觉得很高端，用了CSS3之后就不想再看到它了）。但是自从CSS3的圆角属性border-radius出现之后，广大前端工程师可以省去了很多烦恼，不仅减少了工作量，还能提高网站的性能。只可惜高贵的低版本IE不支持CSS3的绝大部分属性……或者说几乎都不支持，虽然牛人们有写很多针对IE的兼容方案，但是我不推荐用。圆角很多时候只是在视觉上更优雅，基本不影响用户使用。你看不到圆角只能怪你和低版本IE做朋友！！！！好，现在开始正式介绍这个高贵的属性语法在CSS3中，我们可以使用box-radius属性实现容器的圆角效果。什么半圆，椭圆，大圆，小圆都不是问题。 border-radius完整的语法 E{border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius | border-top-left-radius | border-radius} border-radius中的值的大小决定了圆弧的形状，单位可以是px也可以是%。每个角的圆弧其实就是以在这个角上设定的值的大小为半径画出的圆的1/4弧线。

css3之border-radius理解

阅读更多关于 css3之border-radius理解

css3之border-radius理解　　在日常项目过程中，border-radius这个属性算是非常常用的属性之一了，通过设置元素的border-radius值，可以轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。　　通常我在使用这个属性的时候，一般都是用在给div或者button加上一点圆角弧度，显得好看一点，或者用来画一个圆形div。用的稍微高级一点的，也就是用来画了一个右半圆来做为侧边栏的展开/收缩按钮，记得当时还是刚刚开始学习前端不久，这个半圆怎么画还是百度来的，并没有深入去研究为什么这么设置就是这样一个形状。　　　　后来对border-radius的使用也是平平淡淡，无非就是加个圆角画个圆。今天写代码的过程中，突然对border-radius值的设置好像加深了一点理解，就多研究尝试了一下，下面整理一下border-radius的使用方法以及我的理解，如果有理解不对的地方，欢迎指正，相互学习。　　一、border-radius使用　　border-radius的数值有三种表示方法：px、%、em，对于border-radius的值的设置，我们常用的有三种写法：　　（1）仅设置一个值　　第一种方法，应该是我们最常用的一种情况了，常用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值

模仿弹幕效果

阅读更多关于模仿弹幕效果

最近公司在做直播，需要一个弹幕效果，就是那种飞来飞去的，所以写了一个，有借鉴别人的部分，望见谅，希望对大家有帮助 <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>弹幕</title> <style> *{ margin: 0; padding:0; } .container{ width:100%; height:100%; background-color: #f2f2f2; } .barrageBtn{ position: absolute; bottom:0px; padding: 5px 0px; height: 50px; width:100%; background-color: #f3f3f3; } .words{ width: 60%; float: left; height:35px; padding: 5px; margin-top: 5px; border: 1px solid #000; border-radius: 5px; outline: none; margin-left: 5px; } .btn{ float: left; width:120px; height: 37px; margin-left: 15px; border-radius: 5px; background-color:

css border 三角形阴影(不规则图形阴影) & 多重边框的制作

阅读更多关于 css border 三角形阴影(不规则图形阴影) & 多重边框的制作

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！ border 的组合写法　　border：border-width border-style border-color; border-width：边框宽度，不能为百分比，因为不会根据设备宽度改变；同理，outline | text-shadow | box-shadow 也不可以； border-style：边框样式，一般用 solid 多一点，dashed（虚线）、dotted（点状线）也有； border-color：边框颜色，默认颜色是元素的文本颜色，如果没有设置，那就从父元素继承文本颜色；　　边框可以根据方向单独设置，上下左右，border-top | border-bottom | border-left | border-right ; 　　所以属性也可以单独设置，border-top-width | border-top-style | border-top-color ; 　　单属性也可以有组合写法： border-width:上右下左；（顺时针方向） border-width:上左右下； border-width:上下左右； border-width:四个方向； border-style | border-color也可以这样设置；　

CSS border系列

阅读更多关于 CSS border系列

本文更新版链接一、border 关于border的3个属性，分别为border-width、border-style、border-color。其中，border-color默认为元素内容的前景色；border-width默认为关键字medium，但是border-style默认值为none；所以，不指定border-style，边框将不存在。关于 border-color transparent，据说特定情况下有奇效，需要知道有这样一个可选值。 white，白色的dotted边框，有时候会有奇效。比如：更确切地说，应该是颜色与父元素的背景颜色一样的dotted/dashed边框。 8种 border-style ：（只有记住了，才能在需要的时候合理使用。）关于 mixed border 利用CSS的层叠，我们甚至可以为四个方向上的边框分别设置不同的宽度、样式和颜色，取决于具体情况。小tips：边框模拟，等高布局 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>边框模拟等高布局</title> 6 <style> 7 div.container { 8 margin-left: 200px; 9 overflow: hidden; 10 } 11 12 div.box {

CSS3学习之边框(Border)

阅读更多关于 CSS3学习之边框(Border)

我想，对于一个程序员来说，尤其是前端程序员，CSS并不陌生,但是CSS3是什么呢？其实CSS3和CSS...就多了个"3"而已..(废话= =||). CSS3早已经不是新鲜事物，但是学习它却用处不少. 在学习之前，我们需要知道，CSS3虽然很有趣，但是却并没有被当前浏览器完全支持.所以如果我们要在网站中使用CSS3时，最好有相应的不兼容处理. 当然，现在我们只考虑主流的5大浏览器，他们分别是IE, FireFox, Chrome, Safari, Opera. CSS3的浏览器支持状况： √ Firefox ( 3.05+…部分支持 ) √ Google Chrome ( 1.0.154+…部分支持 ) √ Google Chrome ( 2.0.156+…较好支持 ) × Internet Explorer ( IE7, IE8 不支持 ) √ Opera ( 9.6+…很少支持 ) √ Safari ( 3.2.1+ windows…较好支持 ) 我们根据需要使用，IE7，8是不支持的- -这个有点郁闷. 既然CSS3不完全支持？我们为什么要写呢？我想,当你了解到他的好处时，你也会叫好的. 从此就会感叹"原来实现圆角是这么简单","哇，还有这效果?"，咳咳，打住，继续.有什么效果后面会知道的. 今天主要学习CSS3中的边框(Border). 这对我们来说并不陌生.多少次写下

jQuery判断是否选中

阅读更多关于 jQuery判断是否选中

1.判断check是否选中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>判断check是否被选中</title> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <style type="text/css"> *{margin:0; padding: 0} body{font:14px/1.4 "Microsoft Yahei",Arial,Helvetica,sans-serif;background-color: #fff;color:#333;max-width: 640px;margin: 0 auto;} a{

css3实现钟表效果

阅读更多关于 css3实现钟表效果

本文转载于: 猿2048 网站 css3实现钟表效果利用css3 transform属性刻画钟表的的刻度以及指针的角度,代码如下： <head> <meta charset= "UTF-8" > <title>Title </title> <style id= "style" > html{ height: 100% ; } body{ width: 100% ; height: 100% ; margin: 0 ; display: -moz-box ; display: -webkit-box ; display: box ; -webkit-box-align: center ; -moz-box-align: center ; box-align: center ; -webkit-box-pack: center ; -moz-box-pack: center ; box-pack: center ; } . clock{ width: 200 px ; height: 200 px ; border: 4 px solid black ; border-radius: 50% ; position: relative ; } . clock ul{ width: 100% ; height: 100% ; position: relative ; margin: 0

div+css画一个小猪佩奇

阅读更多关于 div+css画一个小猪佩奇

用DIV+CSS画一个小猪佩奇，挺可爱的，嘻嘻。 HTML部分（全是DIV）  <div class="pig_container">  <div class="tail_left"></div> <div class="tail_right"></div> <div class="tail_blank"></div> <div class="tail_middle"></div> <div class="tail_circle"></div>  <div class="left_foot"></div> <div class="left_foot right_foot"></div>  <div class="left_shoes"></div> <div class="left_shoes right_shoes"></div>  <div> <div class="hand_left_top"></div> <div class="hand_left_bottom"></div> <div class="hand_left_middle"></div> </div>  <div class="pig_body_bottom"><

css3动画水波纹、波浪

阅读更多关于 css3动画水波纹、波浪

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html{ font-size: 20px; } body{ background:#444; } @-webkit-keyframes opac{ from { opacity: 1; width:0; height:0; top:50%; left:50%; } to { opacity : 0; width:100%; height:100%; top:0; left:0; } } .animate .w2{ /*延迟1s*/ -webkit-animation-delay:1s; } .animate .w3{ -webkit-animation-delay:2s; } .animate .w4{ -webkit-animation-delay:3s; } .wave{ width: 22.7rem; height: 22.7rem; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; } .wave *{ border:1px solid #fff; position

订阅 border-radius