border-radius | 易学教程

用css画一个哆啦A梦

阅读更多关于用css画一个哆啦A梦

原图：效果图：虽然说没用啥什么高级的技巧，但这让我感受到了CSS的乐趣！好好学习，天天向上！ <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body{ background-color: #66B3FF; height: 300px; overflow: hidden; } #head{ width: 200px; height: 200px; position: absolute; left: 50%; top:31%; margin-left: -100px; margin-top: -100px; background-color: #0080FF; border-radius: 999px; border: 1px solid black; } #face{ width: 179px; height: 150px; position: absolute; left: 43.4%; top:22%; background-color: white; border-radius: 999px; border: 1px solid black; } #leftEye{ width: 50px; height: 60px; position: absolute; left:46.2%

原生模态框,遮罩层

阅读更多关于原生模态框,遮罩层

<! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < meta http-equiv = "X-UA-Compatible" content = "ie=edge" /> < title > Document </ title > < style > body { background-color : #000000 ; } ul , li { list-style : none ; padding : 0 ; margin : 0 ; } .div1 { position : fixed ; left : 0 ; right : 0 ; top : 100px ; margin : 0 auto ; width : 345px ; height : 256px ; background : #ffffff ; border-radius : 5px ; overflow : hidden ; z-index : 100 ; } .line { width : 343px ; border : 1px dashed

【CSS】环形进度条

阅读更多关于【CSS】环形进度条

效果图原理剖析 1.先完成这样一个半圆（这个很简单吧） 2.overflow: hidden; 3.在中间定位一个白色的圆形做遮挡 4.完成另一半 5.使用animate配合时间完成衔接源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>环形进度条</title> <style> .wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 4em; height: 4em; margin: auto; } .container { position: absolute; top: 0; bottom: 0; width: 2em; overflow: hidden; } .halfCir { width: 2em; height: 4em; background: red; } .container1 { left: 2em; } .container1 .halfCir { left: 0; border-radius: 0 4em 4em 0; transform-origin: 0 50%; animation: halfCir1 4s infinite linear; } .container2 {

HTML关于圆形头像的源码

阅读更多关于 HTML关于圆形头像的源码

sass和stylus1px解决方案

阅读更多关于 sass和stylus1px解决方案

1.sass 1 @charset "utf-8"; 2 /** 3 * @module 背景与边框 4 * @description 为元素添加边框（包括1px边框） 5 * @method border 6 * @version 2.0.0 7 * @param {String} $border-width 指定边框厚度（单位为px），默认值：1px，取值与`border-width`属性一致，不同方向代表边框位置 <2.0.0> 8 * @param {String} $border-color 指定边框颜色 <2.0.0> 9 * @param {String} $border-style 指定边框样式 <2.0.0> 10 * @param {String} $radius 指定边框圆角半径，默认值：null <2.0.0> 11 */ 12 @mixin border($border-width: 1px, $border-color: map-get($base, border-color), $border-style: solid, $radius: null) { 13 // 为边框位置提供定位参考 14 position: relative; 15 @if $border-width == null { 16 $border-width: 0; 17 } 18

css写椭圆

阅读更多关于 css写椭圆

先在页面中加入一个div 修改width值为200px，然后把border-radius改成100px / 50px; “/”之前的是水平半径，”/”之后的是垂直半径，所以 100px / 50px就让div成了椭圆 border-radius: 100px/50px; 感谢分享 https://jingyan.baidu.com/article/e5c39bf5bbb5e739d6603341.html 文章来源: css写椭圆

撸一个css定位动画

阅读更多关于撸一个css定位动画

先上效果图布局解析：背景和文字就没啥好说的了，直接说关键部分 1.图标绘制 class 命名为 icon_local 看起来很复杂其实很简单首先咱们画个正方形然后旋转45度 width: 60rpx; height: 60rpx; background: #89849b; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; 接下来让它变成小气球的样子只要设置border-radius即可 transform: rotate(-45deg); 然后给它中心加个小圆圈这里用css的伪元素 after 由于我们上边设置了 flex布局并且让内容全居中了就不用管小圆圈位置问题了 .icon_local:after content: ''; width: 26rpx; height: 26rpx; background: #2f2f2f; border-radius: 50%; 小小的图标就完成了，接下来是下边的波纹动画这个动画其实也是用了旋转只不过是3D的首先画一个小圆圈作为定位图标的阴影命名类名为 .shadow border-radius: 50%; height: 28rpx; width: 28rpx; z-index: -2; /

微信小程序之物流状态时间轴

阅读更多关于微信小程序之物流状态时间轴

刚好写了一个物流状态的时间轴，简单分享一下哈。（一）实现效果真机测试的结果（图片忘记缩小了） github下载源码（二）实现分析页面布局拆分：简单的说：就是父级容器下，左边的子级容器是设置绝对定位（记得父级要设置相对定位哈），然后自己调位置，中间子级容器下放三个子容器（设置时间轴线、点的样式），右边的子级容器设置； wxml代码有备注信息。（三）实现代码 1、wxml代码： < view class = ' g_con ' > < view class = ' topExpress ' > < view class = ' topExpress-left ' > < image src = ' /images/Exchange_goods_map_1.png ' style =' width : 60rpx ; height : 60rpx ; border-radius : 50% ; ' > </ image > </ view > < view class = ' topExpress-right ' > < view class = ' topExpress-right-top ' > 圆通速递 </ view > < view class = ' topExpress-right-middle ' > 运单号：813291235464788594 </

wu

阅读更多关于 wu

body{background:#fff;min-height:100%!important;color:#314659!important;font-family:Lato,"PingFang SC","Microsoft YaHei",sans-serif!important}a{transition:all .3s ease!important}a:hover{color:#2D8CF0!important;text-decoration:none!important}#ad_c1,#ad_c2,#ad_t2,#author_profile,#blogCalendar,#blogTitle h2,#comment_form_container p:nth-of-type(3),#comments_pager_top,#green_channel,#homepage_top_pager,#sidebar_imagecategory,#sidebar_postarchive,#sidebar_recentcomments,#sidebar_recentposts,#sidebar_scorerank,#sidebar_search,#sidebar_shortcut,#sidebar_topcommentedposts,#tip_comment2,#under_post_kb,

6.纯css绘制叮当猫

阅读更多关于 6.纯css绘制叮当猫

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>叮当猫</title> <link rel="stylesheet" type="text/css" href="../css/ddm.css"> </head> <body> <div class="ddm">  <div class="head"></div>  <div class="line face"></div>  <div class="line eye-left"> <div class="eyeball-left"></div> </div>  <div class="line eye-right"> <div class="eyeball-right"></div> </div>  <div class="line nose"> <div class="nose-white"></div> </div>  <div class="line arm-left"></div>  <div class="line arm-right"></div>  <div