Text Shadow

CSS3有哪些新特性？ 　　1. CSS3实现圆角（border-radius），阴影（box-shadow）， 　　2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） 　　3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜 　　4. 增加了更多的CSS选择器 多背景 rgba 　　5. 在CSS3中唯一引入的伪元素是 ::selection. 　　6. 媒体查询，多栏布局 　　7. border-image html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ 新特性： 　　1. 拖拽释放(Drag and drop) API 　　2. 语义化更好的内容标签（header,nav,footer,aside,article,section） 　　3. 音频、视频API(audio,video) 　　4. 画布(Canvas) API 　　5. 地理(Geolocation) API 　　6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； 　　7. sessionStorage

利用vue组件创建模板，使用webpack打包生成插件再全局使用 1、vue init webpack-simple 生成项目目录 2、调整目录结构 3、修改webpack.config.js var path = require('path' ) var webpack = require('webpack' ) module.exports = { entry: './src/index.js' , output: { path: path.resolve(__dirname, './dist' ), publicPath: '/dist/' , filename: 'vue-toast.js' , // 打包后的格式（三种规范amd,cmd,common.js)通过umd规范可以适应各种规范，以及全局window属性 libraryTarget:'umd' , }, module: { rules: [ { test: /\.vue$/ , loader: 'vue-loader' , }, { test: /\.js$/ , loader: 'babel-loader' , exclude: /node_modules/ }, ] }, plugins:[] } 开发一个toast插件，可以借助npm平台发布，在这里就不做过多的说明了 toast.vue <template

一、 CSS3 选择器 CSS3 是 CSS 的第三代版本，新增了很多功能，例如：强大的选择器、盒模型、圆角、渐变、动画、 2D/3D 转换、文字特效等。 CSS3 和 HTML5 没有任何关系！ HTML5 骨架中，可以用 CSS2.1 也可以用 CSS3 。 XHTML 骨架中可以用 CSS3 的样式。 在学习 CSS 之前都是学习选择器，在 CSS2 中有 class 、 id 、标签选择器等。 CSS3 赋予了强大的选择器。 CSS3 没有颠覆传统 CSS 的写法，依然是： 选择器 { k:v; k:v; } CSS 有一个特点，遇见自己不认识的选择器、属性，会静默不报错。 )(*&^) { $%^&*() : )*^%$ ; } div { width : 100px ; fhjkdsahfkjasf : 99834y912y492 ; height : 100px ; !@#$%^&* : $%^&*() ; background-color : orange ; } 1.1 属性选择器 属性选择器 IE7 开始兼容。 CSS3 中 [] 可以选择任意属性，以下任意属性选择器将以自定义属性举例： 选择器 版本 说明 [data-info] CSS2 选中具有 data-info 属性的标签 [data-info=’val’] CSS2 选中具有 data-info 属性

入园已有两年有余，时有博文发表，博客首页使用的是博客园团队提供的模版，但总感觉页面有些单一。平时在看别人的博客时，都有一些自定义功能，还蛮吸引我的。参考了很多博文，今天来一个总结，将自己的博客美化过程来分享下。 先来整体感受一下，美化后的博客首页，如下所示。虽然谈不上精致，但还是丰富了不少，也自定义了自己想要的内容。 前提条件 在美化首页之前，我们需要先做几个必要事情。 开通js权限 如果没开通该权限，你看到别人的定制效果很好，照葫芦画瓢，将代码复制到自己的设置中，发现会不生效。没申请过的朋友，可能会有疑问了，在哪里能获得这个权限呢？ 在你的博客主页点击“管理”---->点击“设置”----下翻找到“ 申请JS权限 ”，提交申请即可。 做完这几步，就是静候佳音了，在工作时间内，一般一小时内就会处理；如果时间比较长还没通过，可以给博客园后台发邮件去申请，发给 contact@cnblogs.com ，有了权限之后就可以开始下面的定制了。有权限显示如下，界面上显示为： 支持JS代码 。 选择模板 我们在使用博客的时候，都是有个模板的。今天分享美化内容，选择的模板是： AnotherEon001 。按理说，每个模板都可以这样优化，只是有些内容或按钮显示的不协调而已，需要再次调整下。优化内容仅供参考，每个人都是不一样的烟火，都是自己的独到之处，可以把自己的博客装饰成别具一格的页面。

【推荐阅读】微服务还能火多久？>>> css3中新增的背景属性: background- image background - size background - origin background -clip background-image css3中可以通过background-image属性添加背景图片。不同的背景图像和图像使用逗号隔开，所有的图片中显示的 最顶端的为第一张 。 可以给不同的图片设置不同的属性: #example1 { background - image: url(img_flwr.gif), url(paper.gif); background - position: right bottom, left top; background -repeat: no- repeat, repeat; } 也可以这样写: #example1 { background -image: url(img_flwr.gif) right bottom no- repeat,url(paper.gif) left top repeat; } background-size 指定背景图片的大小，css3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小，可以指定像素或者百分比大小。指定的大小是相对于父元素的宽度和 高度的百分比的大小。 语法:

CSS基础知识 css ，英文 Cascading Style Sheets ，中文名：级联样式表。层叠样式表。 css 是一种表现语言，是对网页语言的补充。 css 用于网页的风格设计，包括字体，颜色，位置等。 css 使用的4中方式：引入外部样式文件，导入外部样式文件，使用内部样式定义，使用内联样式定义。 引入外部样式文件： <link type="text/css" rel="stylesheet" href="css样式文件的url"/> 导入外部样式文件: <style type="text/css"> @import "css样式文件的url"; </style> 使用内部样式定义： <style type="text/css"> div { background-color: #ffffff; width: 300px; height: 300px; } </style> 使用内联样式定义： <div style="background-color: #ffffff; width: 100px; height: 100px;"> </div> css的两个特性：层叠，继承 层叠：层叠样式生效的优先级： 内联样式->内部样式->外部样式->浏览器默认效果。 继承，就是css属性可以从父元素向下传递到子元素。 css 的选择器 元素选择器，是最简单的选择器。 通配符选择器

CSS基础知识 css ，英文 Cascading Style Sheets ，中文名：级联样式表。层叠样式表。 css 是一种表现语言，是对网页语言的补充。 css 用于网页的风格设计，包括字体，颜色，位置等。 css 使用的4中方式：引入外部样式文件，导入外部样式文件，使用内部样式定义，使用内联样式定义。 引入外部样式文件： <link type="text/css" rel="stylesheet" href="css样式文件的url"/> 导入外部样式文件: <style type="text/css"> @import "css样式文件的url"; </style> 使用内部样式定义： <style type="text/css"> div { background-color: #ffffff; width: 300px; height: 300px; } </style> 使用内联样式定义： <div style="background-color: #ffffff; width: 100px; height: 100px;"> </div> css的两个特性：层叠，继承 层叠：层叠样式生效的优先级： 内联样式->内部样式->外部样式->浏览器默认效果。 继承，就是css属性可以从父元素向下传递到子元素。 css 的选择器 元素选择器，是最简单的选择器。 通配符选择器

3 月，跳不动了？>>> # css3系列-2.css中常见的样式属性和值 # 继续上一篇文章的继续了解css的基础知识，关注我微信公众号：全栈学习笔记 ## css中常见的样式属性和值 ## 1. 字体与颜色 1. 背景属性 2. 文本属性 1. 边框属性 1. 内外边距 1. 鼠标光标属性 1. 列表样式 1. 定位属性 1. 浮动和清除浮动 1. 滚动条 1. 样式显示和隐藏 ### 字体与颜色 ### font-family:微软雅黑;/ 字体名称（类型）：微软雅黑，黑体，楷体，宋体 / font-size: 20px;/ 字体大小 / font-weight: 600;/ 字体加粗 / font-style: italic;/ 字体样式 / ### 背景属性 ### background: #00FF00 url(bgimage.gif) no-repeat fixed top;/ 这是融合在一起的写法 / background-color: red;/ 背景颜色 / background-image:url('图片路径');/ 背景图片 / background-repeat:no-repeat;/ 背景图片是否允许重复no-repeat repeat / background-attachment:fixed;/ 规定背景图像是否固定或者随着页面的其余部分滚动 /

3 月，跳不动了？>>> 开发工具：Visual Studio Code 游戏介绍：已知3个一组的方块，前面2个方块涂有相近的两种颜色，你根据这两种颜色序列的递减情况，猜测第三个方块的颜色是什么，并从下面的方块中选择你认为最接近的颜色。 程序设计步骤： 1.编写html代码 2.编写js代码 html代码编写 设置css文件 import url('https://fonts.googleapis.com/css?family=Pacifico'); html, body { background: #9cf; margin: 0; padding: 0; } h1, h2 { text-align: center; color: white; font-size: 5vmin; text-shadow: 0 1px 3px rgba(0,0,0,0.25); font-family: Pacifico, arial, serif; font-weight: normal; } h2 { font-size: 3.5vmin; margin-top: 5vmin; } #points { font-family: Pacifico, Verdana, sans-serif; color: white; font-size: 5vmin; text-shadow: 0 1px 3px

浮动： float: none; //没有浮动 float: left; //左浮动 float: right; //右浮动 清除浮动： 1.额外标签，在最后一个浮动元素上天剑一个标签clear：both； clear:both; 2.父集添加overflow属性 overflow:hidden; 3.使用after伪元素清除浮动 .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ } 4.使用双伪元素before和after双伪元素清除浮动 .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } css的书写顺序： 1.布局定位属性：display/position/float/clear/visibility/overflow（display第一个写） 2.自身属性：width/height