border-radius | 易学教程

CSS3之太阳系动画效果

阅读更多关于 CSS3之太阳系动画效果

效果如下：代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background: #000; } .sun{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; /*保证居中*/ transform: translate(-50%;-50%); background: yellow; border-radius: 50%; box-shadow: 0 0 30px 3px gold; } .earth{ width: 350px; height: 350px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border:1px solid #ccc; border-radius: 50%; /*animation: whirl 5s linear infinite;*/ } .earth::before{ content: ""; width: 40px;

html+ccs3太阳系行星运转动画

阅读更多关于 html+ccs3太阳系行星运转动画

做一个太阳系八大行星的运转动画，不包括行星的卫星，所有行星围绕太阳公转，行星采用纯色，暂时没有自转。效果静态图：动画中包括：太阳及各行星，运行轨道，行星公转动画。先画好草图，设计好大小和位置，根据公转周期计算好动画执行的时间。 html的结构: 一个class为solarsys的div，作为太阳系容器元素，该div的position为relative。行星轨道和行星都用div，position为absolute。容器用relative和内部元素采用absolute的定位方式，比较简单的能实现效果，缺点就是大小是固定的。 <div class="solarsys">  <div class='sun'></div>  <div class='mercuryOrbit'></div>  <div class='mercury'></div>  <div class='venusOrbit'></div>  <div class='venus'></div>  <div class='earthOrbit'></div>  <div class='earth'></div>  <div class='marsOrbit'

用css画图标

阅读更多关于用css画图标

css3的属性 transform(转换) 用途很广泛，功能也很强大，为了熟悉它的各种转换方式(平移 translate，旋转 rotate，扭曲 skew，放缩 scale)，我做了一些平常常用的一些简单的图标。这些图标很多是通过三角形来拼贴起来的，所以我们需要知道怎么样画三角形。 1. 我们要将该 div 的 width 和 height 都设置为 0，三角形是通过设置 border 来实现； 2. 通过我们需要画成的三角形的目标分析，这个三角形的朝向(只针对规则的朝向：上、右、下、左、上左、上右、下右、下左，不规则的朝向可以通过旋转来实现)； 3. 如果是上、右、下、左四种中的一种，将朝向的对面的 border-color 设置为我们需要的颜色，该朝向的这一边不设置 border，其它两边的 border-color 设置为 transparent； 4. 如果是上左、上右、下右、下左中的一种，以上右为例，设置相关的两边：上和右的 border-color 设置成我们想要的颜色，其它两边的 border-width 设置成 transparent。 5. border-width 的值就是底边长和高。看几个例子：例1：图形：该图形中，只有上方位有边，这个边就是三角形的底边了，底边长为 3.6em(左右相加)，高为 2em。右、下、左没有边。于是 border-top

CSS 圆角

阅读更多关于 CSS 圆角

css的border-radius属性可以实现圆角、圆形、椭圆形。实现上述圆角的前提是盒子要有边框。规则圆角下面的示例演示了圆角、赛道、圆形，我们先看效果图。下面是实现的代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >圆角</ title > < style > div{ margin:20px; } div.one{ width:50px; height:50px; border:1px solid #333; border-radius:7px; } div.two { width:120px; height:50px; border:1px solid #333; border-radius:50px; } div.three { width:120px; height:120px; border:1px solid #333; border-radius:120px; } </ style > </ head > < body > < h1

css3之border-radius

阅读更多关于 css3之border-radius

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

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加圆角边框，或者画一个圆形按钮，仅需设置一个数值，即可给元素的四个边角设置统一的圆角弧度，例如： 1 #test1 {

理解CSS边框border

阅读更多关于理解CSS边框border

前面的话边框是CSS盒模型属性中默默无闻的一个普通属性，CSS3的到来，但得边框属性重新焕发了光彩。本文将详细介绍CSS边框基础样式边框是一条以空格分隔的集合样式，包括边框粗细(边框宽度)、边框颜色和边框样式，且先后顺序无关 border: border-width border-color border-style border: 1px solid red; 【边框样式】如果一个边框没有样式，边框将根本不会存在关于虚线dashed，在chrome/firefox下，虚线宽高比是3/1；而在IE下，虚线宽高比为2/1。所以在IE下虚线显得比较密关于点线dotted，在chrome下，点线是方点；而在IE/firefox下，点线是圆点 border-style:none(默认) border-style:hidden/dotted/dashed/solid/double/groove/ridge/inset/outset(共9种) 【边框宽度】边框的宽度不能为负，不能指定为百分比值。这是因为，边框并不会因为设备尺寸变大，所以百分比单位并不符合语义。类似地，还有outline、box-shadow、text-shadow等边框宽度支持3个关键字：this/medium/thick，分别是1px、3px、5px，且medium为默认值

基础 - CSS边框

阅读更多关于基础 - CSS边框

<div class="box"></div> 　　 * { margin: 0; border: 0; padding: 0; } .box { position: relative; } .box .part { position: absolute; background: #DDDDDD; } .box .part div{ width: 50%; height: 50%; border: 1px solid #C81623; margin: auto; } .box .part .JuXing{ border-radius: 0 0 0 0; } .box .part .YuanXing{ border-radius: 50%; } .box .part .GongXing{ border-radius: 50% 50% 0 0; } .box .part .TuoYuan{ height: 25%; border-radius: 50%; } .box .part .ShanXing{ border-radius: 100% 0 0 0 ; } 　　 $(function () { var $oBox = document.querySelector(".box"); var aClass = ["JuXing","YuanXing","GongXing",

pyqt 精美样式

阅读更多关于 pyqt 精美样式

样式（复制来的）复制粘贴用 QLabel {color:white; font-family: 宋体;font-size:12px;border:none;text-align:center;} QLabel:disabled {color:gray;} QLineEdit {color:black; font-family: 宋体;font-size:12px;text-align:center;} QPushButton {font-family: 宋体;font-size:12px;text-align:center;} QComboBox {font-family: 宋体;font-size:12px;} QToolTip { border-radius: 3px; } QMessageBox { border-color:#32435E; border-width:1px; border-radius: 3px; min-width:30px; min-height:23px; /*font-family:"宋体";font-size:36px;*/ border-image:url(./config/qss/style_1/images/messageBox_background.png); height: 300px; width: 200px; border:

h5自定义audio（问题及解决）

阅读更多关于 h5自定义audio（问题及解决）

h5活动需要插入音频，但又需要自定义样式，于是自己写咯 html 1  2 < span class ='cur' ></ span >< input type ="range" min =0 max =100 class ='range' value =0 >< span class ='max' ></ span > css /* 进度条 */ .range { width : 5.875rem ; height : 0.15rem ; background : #2386e4 ; border-radius : 0.25rem ; -webkit-appearance : none !important ; position : absolute ; top : 3.55rem ; left : 6rem ; } /* 进度滑块 */ .range::-webkit-slider-thumb { width : 0.5rem ; height : 0.5rem ; background : #fff ; border : 1px solid #f18900 ; cursor : pointer ; border-radius : 0.25rem ; -webkit-appearance : none

订阅 border-radius