CSS伪代码
/*在p之后插入我是好人*/
p.first:after {
content: "好人"
}
/*在p之前插入亲爱的朋友men*/
p:before {
content: "亲爱的朋友men"
}
/*设置第一个p元素*/
p:first-child{
/*background-color: yellow;*/
}
/*设置最后一个p元素 等价于:p:nth-last-child(1)*/
p:last-child{
/*background-color: yellow;*/
}
/*设置正数数第一个p元素*/
p:nth-child(1){
/*background-color: red;*/
}
/*设置倒着数第一个p元素*/
p:nth-last-child(1){
/*background-color: red;*/
}
/*box-shadow box阴影 x偏移量 y偏移量 阴影模糊值 颜色 */
P{
margin-top: 50px;
box-shadow: 5px 5px 3px red;
/*webkit浏览器阴影*/
-webkit-box-shadow: 5px 5px 3px red;
/*火狐浏览器阴影*/
-moz-box-shadow: 5px 5px 3px red; }
p{
/*text-shadow: 5px 5px 3px blue;*/
}
div.image{
background: url(123.png);
/*background-size:300px 300px;*/
background-size:50% 100%;
background-repeat:no-repeat;
-moz-background-size:300px 300px; /* 老版本的 Firefox */
background-clip: no-clip;
width: 500px;
height: 600px;
}
.image{
border:1px solid;
border-radius: 20px 20px;
-moz-border-radius: 20px 20px;
-webkit-border-radius: 20px 20px;
}
CSS伪代码的更多相关文章
- CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果
本文将介绍一个小技巧,通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果. 起因 一日,一群友私聊问我.如何使用 CSS 实现下述效果,一个文字的波浪效果: 我当时想都没想,就回 ...
- flex布局中transform出错
在flex布局下,若应用transform 的动画的子元素没有使用进行定位,则动画过程中,子元素将相对display:flex的元素进行static定位 动画结束后位置正常: 修复代码只需要posit ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS优先级
一.CSS代码出现的几个位置 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下:(外部样式)Extern ...
- Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...
- css学习--css基础
学习慕课网笔记,课程:http://www.imooc.com/code/2024 1.css选择器 子选择器:parent>child 子选择器是指选择parent的范围内的第一个子元素.这里 ...
- min.css----全世界最快的CSS框架
有一个CSS框架,叫min.css,它号称是全世界最快的. 难怪,它的代码就这一点. 你看它的页面例子,像Bootstrap,但比后者轻多了,它只是一些CSS样式,没有JavaScript代码. ...
- CSS中链接文本为图片时的问题(塌陷、对应的图片建立倒角的问题)
我在做Javascript DOM编程艺术的时候,在12章自己做练习时遇到了一个问题,<a>的内容<img>从<a>的盒子中溢出.代码如下: <a href= ...
- HTML和CSS前端基础
Html标题 <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> Html段落.换行 ...
随机推荐
- write solid code 零散(原文)
整理下目录,看了这个文件,幸好未删除. 以下是<write solid code>中的原文摘录. 1.How could I have prevented this bug? 2.How ...
- json格式的javascript对象用法分析
格式: objectName = { property1:value1, property2:value2, …, propertyN:valueN } property是对象的属性 ,val ...
- 简易2D横版RPG游戏制作
Unity学习笔记1 简易2D横版RPG游戏制作 http://m.blog.csdn.net/article/details?id=24601905
- ModelState.AddModelError使用
后台: ModelState.AddModelError("userPwd", "请输入密码!"); ModelState是一个字典类型,这句话的作用是向Mod ...
- 一、SDWebImage分析--库处理流程分析
二.SDWebImage分析--源码具体分析 这阵子看了SDWebImage的实现跟源代码.也看了下网上的一些总结. 这里我自己画了个流程图来辅助理解下SDWebImage这个库的实现流程.相信也是有 ...
- ionic跳转(一)
在ionic中可以用两个办法写中转链接(写模版地址或路由地址) 1)a 标签的 href <a class="button button-icon icon ion-android-h ...
- ionic creator(ionic生成器)
用来生成前端 html 还是挺方便的(接口数据另算),弄好就可以直接下载 https://creator.ionic.io/app/dashboard/projects
- react实现的点击拖拽元素效果
之前用vue做日程管理组件的时候,用到了点击拖拽的效果,即点击元素,鼠标移动到哪里,元素移动到哪里,鼠标松开,拖拽停止,现在在弄react,于是也在想实现这个效果,经过一番折腾,效果出来了,代码如下: ...
- iOS开发:iOS中图片与视频一次性多选 - v2m
一.使用系统的Assets Library Framework这个是用来访问Photos程序中的图片和视频的库.其中几个类解释如下 ALAsset ->包含一个图片或视频的各种信息 ALAsse ...
- (一)微信小程序之模拟调用后台接口踩过的坑
如下图标记的三个点 在调试过程中出现问题,特此记录. 1. 之前在浏览器测试接口习惯省略 http:// ,是因为浏览器默认有一个检测,在你输入的网址前面加http://,如果有就不加. 然而在微信小 ...