border-radius

2019.11.12 网页效果

由 不羁岁月 提交于 2019-11-27 18:47:35
图片旋转 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> 　

CSS3 实现太极图案

由 假装没事ソ 提交于 2019-11-27 18:04:03
CSS3实现太极图案 分析图片组成（如下图所示）： 先给出html代码： <div class="box"> <div class="content"> <div class="left"></div> <div class="right"></div> <div class="inner-circle up"> <div class="sm-circle circle-white"></div> </div> <div class="inner-circle down"> <div class="sm-circle circle-black"></div> </div> </div> </div> View Code 步骤一： 先把紫色框出来的两个div修改其样式，使其分别成两个半圆，一黑一白。 .left{ position: absolute; width: 50%; top: 0; left:0; height: 100%; background-color: #000000; border-radius: 100% 0 0 100% / 50% 0 0 50%; } .right{ position: absolute; width: 50%; top: 0; right: 0;; height: 100%; background-color: #FFFFFF;

CSS

由 蓝咒 提交于 2019-11-27 17:19:22
1. form提交数据 get: 不安全的提交数据，高效 post: 安全的提交数据，低效 前台都可以给后台提交数据，后台一定会给前台一个反馈结果 2. 高级选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { font-size: 30px; } /* 高级性选择器优先级比较： 无限大于：id > class > 标签 种类相同：比个数 个数相同：比顺序 高级选择器种类不影响优先级 */ /* 所有的p标签*/ .p { color: red; } /* 群组选择器,控制多个 */ /* 每个选择器位，可以为id、class、标签、选择器组合，中间用空格隔开 对所有选择器位的都有效果*/ #p, .p, .div { color: crimson; } /* 后代(子代)选择器：控制一个标签， 前方的都是修饰*/ .div .div .div { /* 后代 空格 父子（孙）只要前面两个是 .div，在第三层或者第四层，子子孙孙层的.div均有效） */ color: yellow; } body .div { color: red; } .div > div > .p { /* 子代 > 父子*/ color: yellow; } /* 兄弟（相邻

day-51前端

由 寵の児 提交于 2019-11-27 17:18:36
高级选择器： 　 　基础选择器的各种组合 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { font-size: 30px; } /*选择器高级：基础选择器的各种组合*/ #h1, .p, .a { /*1、群组选择器：可以控制多个标签( #h1, .p, .a),用逗号连接*/ /*注：每一个选择器位( #h1, .p, .a)，可以为id、class、标签、选择器组合*/ color: red; } body .div2 .p2 { /*2、后代选择器(经常用)：需要父类们中需要有一个.div2一个body，用空格连接 控制一个标签，前方的都是修饰*/ color: orange; } .div2 > div > .p2 { /*子代 >，父子*/ /*3、子代选择器：.p2必须和div相连，div必须和.div2相连，用>连接， 控制一个标签，前方的都是修饰*/ color: pink; } .p3 ~ .i3 { /*4、兄弟选择器：可相邻也可不相邻，且必须通过上方修饰下方，用~连接 控制一个标签，前方的都是修饰*/ color: greenyellow; } .div3 + .i3 { /*5、相邻选择器 ，必须相邻，且必须通过上方修饰下方，用

动态样式语言Scss&Less介绍与区别

由 只谈情不闲聊 提交于 2019-11-27 11:56:08
一. Sass/Scss&Less是什么？ Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。 Less 一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。less 中文站 Sass与Scss有什么差别 Sass原先跟Haml一样的缩排语法，对于写惯Css的前端来说是很不直观的，也不能将原来的Css加到Sass里面，因此Sass改良了语法，Sass 3就变成了Scss(Sassy CSS)。与原来的语法兼容，只是用{}取代了原来的缩进。 Sass .content margin:10px auto h1 font-size:24px; Scss .content{ margin:10px auto h1{ font-size:24px; } } 二. Sass/Scss&Less区别？ 1.Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器

css遇到的一些问题

由 萝らか妹 提交于 2019-11-27 10:11:19
border-radius无效 http://makaiqian.com/bug-border-radius/ -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); -webkit-transform: translateZ(0); transform: translateY(0); -webkit-transform:rotate(0deg); img 标签引起的缝隙 Q：其实如图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是你对齐的是 baseline，撑开高度的却是元素整体的高度（bottom line），这样肯定就会造成一定的间隙，也就是我们上文出现的问题了。 A： 解决方案如下： 是因为baseline的原因，可以设置vertical-align:middle; 设置display;block; 使用浮动float 设置font-size:0; 来源： https://www.cnblogs.com/lin00/p/11358314.html

css3修改滚动条样式

由 こ雲淡風輕ζ 提交于 2019-11-27 06:26:53
1.滚动条组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去） ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处 ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 2.修改浏览器的滚动条样式 heml代码 <div class="box"></div> css代码 .box{ height: 2000px; } /* 滚动条的整体样式 */ ::-webkit-scrollbar{ width: 8px; height: 8px; } /* 滚动条的滚动轨迹 */ ::-webkit-scrollbar-track{ border-radius: 8px; background-color: hotpink; -webkit-box-shadow: 0 0 5px rgba

WEB第四天

由 ぃ、小莉子 提交于 2019-11-27 05:43:28
WEB第四天 一、盒子模型 1.1 常用属性 border 盒子的边框 margin 外边距 padding 内边距 box-shadow 盒子的阴影， 值： color left_position top_position height div { box-shadow : skyblue 5px 5px 5px ; } border-radius 设置边框的圆角（圆的半径） #nav a { border : 1px solid red ; border-radius : 5px ; padding : 5px ; } 案例： 圆形图片（用户头像） .circle { display : inline-block ; width : 100px ; height : 100px ; border-radius : 50% ; } < div > < img class = " circle " src = " images/gyy6.jpg " > </ div > 二、定位 在CSS样式中，定位的属性： position , 可选的值： static|absolute|relative|fixed 2.1 static 默认 按从上到下的文档流的方式展示标签的, 不会脱离文档流的。 样式中的top、left、right、bottom不能使用的。 2.2 absolute

css实现调色板

由 跟風遠走 提交于 2019-11-27 01:33:32
《css secrets》中案例的实现 原图 我实现的效果图： 纯静态页面 <!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>调色板的实现，根据兄弟元素个数来设置样式</title> <style> ul { list-style: none; display: flex; flex-direction: row; justify-content: space-around; } li { list-style: none; height: 200px; display: inline-flex; width: 100%; position: relative; /* padding: 0 10px; */ } div { position: absolute; top:0; left: 0; /* background-color: (83,172,150,0.4); */ /* opacity: 0.5; */ /* background

纯CSS实现各类气球泡泡对话框效果

由 隐身守侯 提交于 2019-11-26 23:34:04
一、关于纯CSS实现气泡对话框 首先，来张大图： 上边这张黄黄的，大大的，圆圆的，有个小尾巴，文字内容有些YY的图片，就是使用纯CSS实现的气泡对话框效果，一点图片都没有哦。看到这里，你是不是跟我一样，有些惊叹CSS的潜力呢。关于这张图片，暂时先放到一边，下面我要讲一些与主旨相关的比较重要的，同时又很实用的一些技术。 我们首先看下面这一张图片（截自人人网）： 可能颜色有点淡，在左上角有个90度的尖角，于是整个形成了一个气泡对话框。现在考考你，如果你来实现这个效果，你会怎么做？ //zxx:假设你已经思考了一会儿｡◕‿◕｡ 我想，如果您没有看本文标题，可能就想到的是做个90度等腰三角形小图片；就算您知道可以用CSS实现上面的效果，但是您知道是什么方法吗？当然，是绝对兼容的方法（从已经在美国办了隆重葬礼的IE6到很多人喜欢的Firefox和Safari）。您有主意吗？ 好，我们先来看看人人网是怎么实现的，我们用小bug（ //zxx:指firebug，我喜欢亲切的称之为“小bug” ）看一看，原来也是使用的图片，600*6像素的图片，见下图： 查看此图片点此链接： http://xnimg.cn/imgpro/box/box_arrow.png 这可是活生生的多了一次图片请求啊，而且是个独立的小图片，关键是在访问量惊人的首页上。优秀与平庸的差异在哪里呢？前者追求极致，后者追随大流。
订阅 border-radius