【CSS3】---@font-face】的更多相关文章

[微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已经关掉了.这是一个发图片猜谜语的应用,用户猜对了分红包,所得奖金可以提现.开发的时候对需求都不太看好,觉得用户粘性太低了.今天就把所有的程序拿了出来放在了github上.供有兴趣的伙伴玩耍. 产品逻辑 用户从公众号直接进来,可以做两件事,一个是发布悬赏谜题,一个是去答题.答题获得赏金可以提现.之前还…
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> <style type="text/css"> #p1{fon…
练习题 根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用box-shadow实现立体风格 3.制作导航分隔线 提示:使用渐变与伪元素制作 4.删除第一个和最后一个导航分隔线 提示:使用伪元素删除第一个和最后一个分隔线 例子: <!doctype html> <html lang="en"> <head> <meta charset="…
.navdemo{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; margin:40px auto 0; background: #f65f57; /*制作圆*/ border-radius:5px; /*制作导航立体风格*/ box-shadow:0 5px 5px 0px gray; } .navdemo a{ display: inline-block; -webkit-transition: a…
在线演示: DEMO DEMO中及以下代码并没有写兼容代码,请使用高级浏览器打开,IE版本对CSS3支持并不太友好,IE11打开没有滚屏效果. 兼容代码前缀: -webkit- -moz- -o- -ms- 直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pagaToggle</title>…
Flex布局是什么 如何指定一个容器为Flex布局 Flex的基本语法 display flex-direction justify-content align-items flew-wrap align-self flex-flow flex order 示例 骰子的布局 圣杯的布局 参考文章 一, Flex布局是什么 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现.Flex布局…
本文介绍了css3中的box-sizing属性,在这之前读者需要预备知识width的范围. 浏览器的支持情况 Browser Suppored Notes Internet Explorer Yes version 8.0 Mozilla Firefox Yes 29.02.0 -moz- chrome Yes 10.04.0 -webkit- opera Yes version 9.5 Safari Yes 5.13.2 -webkit- box-sizing属性 box-sizing属性可以…
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如"拉普拉斯不等式").这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面"Matrix(矩阵)"的时候,难免会心生畏惧…
border-image简介 border-image是CSS3中的新特性.目前几乎所有的主流浏览器都已经支持该特性,详情请移步border-image的兼容性. border-image属性及使用说明 border-image的属性有6个,分别为border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat.通常是使用简写,比如: border-image…
参考地址:http://www.w3cplus.com/css3/new-css3-linear-gradient.html background-image: linear-gradient(to bottom, //渐变方向#d9edf7 //开始颜色0px, //?????#b9def0 //结束颜色100%); //透明 百分比 background-image: -webkit-linear-gradien(to bottom, #d9edf7 0px, #b9def0 100%);…