border-radius

一、border-radius 最大值100% /* border-radius的最大值是100% */ .block { width: 100px; height: 100px; border: 1px solid red; /* border-radius: 10px 10px 100% 100%; */ border-radius: 10px 10px 200px 200px; } 二、使用大圆拼凑更多边角效果示例： 注：微信抢红包页面背景效果可以使用这种方式 css代码： .block { width: 200px; height: 200px; border: 1px solid red; border-radius: 10px; margin: 100px 0px 0px 100px; position: relative; overflow: hidden; } .blocktop { width: 200%; height: 200%; border: 1px solid blue; border-radius: 50%; margin-top: -150%; margin-left: -50%; background: blue; position: relative; overflow: hidden; } .blocktop .blockInner {

1.基本使用 圆角使用 "border-radius" 属性来控制，默认值为0，即没有圆角。 border-radius | 百分比/像素值 .box { width: 300px; height: 300px; background-color: #336699; /* border-radius: 50%; */ /* 等价于 */ border-radius: 150px; } 如图： 2.简写 一个容器共有4个角，border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius 下面的代码是等价的 border-radius:10px; 等价于 border-radius:10px 10px 10px 10px; 等价于 border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; 3.圆角属性值的顺序 圆角属性值依次对应的是：左上-右上-右下-左下

css样式里可以用border-radius把div或图片变成带有一定圆角的，如果是div本身是正方形，设置圆角度是百分之五十，就是圆形。 border-radius：值可以是具体的px数值，也可以是百分比。 给div或img加这个属性，都可以把边缘变成圆角的或圆形的。 正方形的div或正方形的img图片，加 border-radius:50%; 会变成圆形。 此外，还可以单独设置两个边框的圆角，单个角： border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 。 设置div一定透明度的背景色，颜色可以用 rgba ，这个有第四个参数，例如 0.5 ，就是半透明。 图片的透明，可以直接做成半透明的的png图片。 测试代码： <style> body{margin:0px;} #divall{margin-top:30px;margin-left:30px;width:500px;height:230px;background-image:url(bg1.png);position:relative;} #div1{width:100px;height:50px;background:rgba(255,0,0,0.5);border

<template> <div class="main"> <div class="header"> <i class="el-icon-back" @click="back"></i> <input type="text" placeholder="请输入搜索内容"> <p class="title" @click="cli">管理</p> </div> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :offset="400"> <!-- <van-cell v-for="item in list" :key="item" :title="item" /> --> <div class="list-item"> <ul> <li class="goods" v-for="(item,i) in goodsList" :key="i" ref="content"> <!-- 收藏按钮样式 --> <div class="input_check" v-show="apper"> <span class="ico_gou" :class="{'ico_gou_on':item.checked}" @click="selectGoods(item)"></span

一、选择皮肤 选择博客皮肤：Custom 二、页面定制 CSS 代码 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

一、背景 　　最近在自己博客园逛的时候，总会有一个感觉，真是太丑了，然而又觉得自己暂时抽不出太多的时间来搭建自己的博客系统，上网一搜才发现，原来我们可以自定义博客的布局以及样式的，那我就在网上找到了一个哥们的自定义Hexo经典主题Ligt的CSS文件，然后根据自己的审美及需要来做改动后上传以此来使自己的博客看起来像是自己搭建的个人博客。因为我总觉得一个良好的界面才会给博友读下去的欲望，否则很恶心，连自己都这么觉得。下面我们就来分享这个替换步骤教程。 二、实现步骤以及实现原理 1.先copy经过我改良过的博客CSS样式（手机和PC响应式布局） 1 @font-face { 2 font-family: 'FontAwesome'; 3 font-style: normal; 4 font-weight: normal; 5 src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font

图片旋转 img { animation: myani 8s linear infinite; } 亮度变化 div:hover { filter: brightness(100%); } 图片放大 img:hover img { transform: scale(1.1, 1.1); } 轮播加底部小点 html： <div class="lunbo"> 　　<img class="tupian" onclick="window.open('../jiemian 4/jiemian-4.html')" src="../public/images/11135558154.jpg"> 　　<img class="tupian" src="../public/images/31192915981.jpg"> 　　<img class="tupian" src="../public/images/179541537.jpg"> 　　<img class="tupian" src="../public/images/171496540.jpg"> 　　<img class="tupian" src="../public/images/18121041165.jpg"> </div> <div class="dibu"> 　　<div class="xiaodian x1"></div> 　

现象： 将div变为有一定幅度的圆形、椭圆形等 方法： 使用css的border-radius 属性进行设置 CSS3 border-radius 属性：向 div 元素添加圆角边框： 一：首先建立一个div 二：给div设置圆角边框的弧度 三：给div设置弧度为50%的时候 正方形就会变为圆形 四：如果给长方形设置50%的弧度 就会得到椭圆形 5：如果需要得到中间保持长方形的直线 两边设置为圆弧呢? 就使用像素px进行设置 而不是百分比设置 六：一次性标识所有角度进行不一样的设置 七：也可以分别对不同角度进行设置 来源： https://www.cnblogs.com/xsd1/p/11934788.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .wrapper { width: 300px; height: 300px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; animation: move 10s infinite linear; /*border: 1px solid red;*/ } @keyframes move { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .circleFB { width: 300px; height: 300px; background-color: #000000; position: absolute; top: 0; border-radius: 50%; } .circleSB { width: 150px; height: 300px; background-color: white; border-radius: 0 150px 150px 0; position:

mixin定义（使用@mixin定义）： @mixin hexagon-generator($hexagon-width, $factor, $border-radius){ display: inline-block; border-radius: 50%; width: ($hexagon-width + $border-radius) * $factor; height: ($hexagon-width + $border-radius) * $factor; display: flex; align-items: center; justify-content: center; } .hexagon-shape { @include hexagon-generator(88rpx, 1, 8rpx); } 使用 .hexagon-shape { display: inline-block; border-radius: 50%; width: (88rpx + 8rpx) * 1; height: (88rpx + 8rpx) * 1; display: flex; align-items: center; justify-content: center; } 转载： https://blog.csdn.net/liya_nan/article/details