css,Code片段,代码实例,代码示例,代码片段库

css 网格布局列50％

https://twitter.com/goiblas/status/1112754544554008577

grid-layouts-columns-50.css

/* grid */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

/* flexbox */
.row {
  display: flex;
  justify-content: space-between;
}

.col-50 {
  width: calc(50% - 10px);
}

/* flexbox + custom properties */
.row {
  --gutter: 20px;
  display: flex;
  justify-content: space-between;
}

.col-50 {
  width: calc(50% - (var(--gutter) / 2));
}

css 过渡悬停显示信息

transition-hover-how-info.css

.article-headlines li {
  position: relative;
 }

.article-headlines li a {
  overflow: hidden;
}

.article-headlines li .rectangle-opacity {
  position: absolute;
  left: 0;
  bottom: -8rem;
  transition: bottom 500ms;
  background-color: transparent;
}
.article-headlines li:hover .rectangle-opacity {
  bottom: 0;
  background-color: rgba(0, 0, 0, .65);
}

css 文字2行但不是破词

text-2-lines.css

/* Avoid word break in FF */
word-break: initial;

/* Avoid word break in Chrome and Safari */
word-break: break-word;

css 带连字符的无序列表

http://jsfiddle.net/encounter/2dtS3/

hyphens-list.html

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

hypens-list.css

ul {
    list-style-type: none;
}
ul li:before { 
    content: "-";
    left: -10px;
    position: relative;
}

css HTML REM大小

style.css

/* This sets the size of 1 rem */
html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
  	box-sizing: border-box;
 	font-size: 16px;}

	@media (max-width: 768px) {
		html {
			font-size: 11.5px;}
	}

css 渐变动画背景

granim-init.js

var granimInstance = new Granim({
    element: '#hero-gradient',
    name: 'basic-gradient',
    direction: 'left-right',
    opacity: [1, 1],
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                ['#AA076B', '#61045F'],
                ['#02AAB0', '#00CDAC'],
                ['#DA22FF', '#9733EE']
            ]
        }
    }
});

granim.min.js

/*! Granim v1.0.6 - https://sarcadass.github.io/granim.js */
!function t(e,s,i){function n(a,r){if(!s[a]){if(!e[a]){var h="function"==typeof require&&require;if(!r&&h)return h(a,!0);if(o)return o(a,!0);var c=new Error("Cannot find module '"+a+"'");throw c.code="MODULE_NOT_FOUND",c}var l=s[a]={exports:{}};e[a][0].call(l.exports,function(t){var s=e[a][1][t];return n(s?s:t)},l,l.exports,t,e,s,i)}return s[a].exports}for(var o="function"==typeof require&&require,a=0;a<i.length;a++)n(i[a]);return n}({1:[function(t,e,s){"use strict";function i(t){this.getElement(t.element),this.x1=0,this.y1=0,this.name=t.name||!1,this.elToSetClassOn=t.elToSetClassOn||"body",this.direction=t.direction||"diagonal",this.isPausedWhenNotInView=t.isPausedWhenNotInView||!1,this.opacity=t.opacity,this.states=t.states,this.stateTransitionSpeed=t.stateTransitionSpeed||1e3,this.previousTimeStamp=null,this.progress=0,this.isPaused=!1,this.isCleared=!1,this.isPausedBecauseNotInView=!1,this.iscurrentColorsSet=!1,this.context=this.canvas.getContext("2d"),this.channels={},this.channelsIndex=0,this.activeState=t.defaultStateName||"default-state",this.isChangingState=!1,this.activeColors=[],this.activeColorDiff=[],this.activetransitionSpeed=null,this.currentColors=[],this.eventPolyfill(),this.events={start:new CustomEvent("granim:start"),end:new CustomEvent("granim:end"),gradientChange:function(t){return new CustomEvent("granim:gradientChange",{detail:{isLooping:t.isLooping,colorsFrom:t.colorsFrom,colorsTo:t.colorsTo,activeState:t.activeState},bubbles:!1,cancelable:!1})}},this.callbacks={onStart:"function"==typeof t.onStart&&t.onStart,onGradientChange:"function"==typeof t.onGradientChange&&t.onGradientChange,onEnd:"function"==typeof t.onEnd&&t.onEnd},this.getDimensions(),this.canvas.setAttribute("width",this.x1),this.canvas.setAttribute("height",this.y1),this.setColors(),this.refreshColors(),window.addEventListener("resize",this.onResize.bind(this)),this.isPausedWhenNotInView?this.pauseWhenNotInView():this.animation=requestAnimationFrame(this.animateColors.bind(this)),this.callbacks.onStart&&this.callbacks.onStart(),this.canvas.dispatchEvent(this.events.start)}i.prototype.setColors=t("./setColors.js"),i.prototype.eventPolyfill=t("./eventPolyfill.js"),i.prototype.colorDiff=t("./colorDiff.js"),i.prototype.hexToRgb=t("./hexToRgb.js"),i.prototype.setDirection=t("./setDirection.js"),i.prototype.makeGradient=t("./makeGradient.js"),i.prototype.getDimensions=t("./getDimensions.js"),i.prototype.getElement=t("./getElement.js"),i.prototype.animateColors=t("./animateColors.js"),i.prototype.getLightness=t("./getLightness.js"),i.prototype.refreshColors=t("./refreshColors.js"),i.prototype.changeState=t("./changeState.js"),i.prototype.pause=t("./pause.js"),i.prototype.play=t("./play.js"),i.prototype.clear=t("./clear.js"),i.prototype.getCurrentColors=t("./getCurrentColors.js"),i.prototype.pauseWhenNotInView=t("./pauseWhenNotInView.js"),i.prototype.onResize=t("./onResize.js"),e.exports=i},{"./animateColors.js":2,"./changeState.js":3,"./clear.js":4,"./colorDiff.js":5,"./eventPolyfill.js":6,"./getCurrentColors.js":7,"./getDimensions.js":8,"./getElement.js":9,"./getLightness.js":10,"./hexToRgb.js":11,"./makeGradient.js":12,"./onResize.js":13,"./pause.js":14,"./pauseWhenNotInView.js":15,"./play.js":16,"./refreshColors.js":17,"./setColors.js":18,"./setDirection.js":19}],2:[function(t,e,s){"use strict";e.exports=function(t){var e,s,i,n=t-this.previousTimeStamp>100,o=void 0===this.states[this.activeState].loop||this.states[this.activeState].loop;(null===this.previousTimeStamp||n)&&(this.previousTimeStamp=t),this.progress=this.progress+(t-this.previousTimeStamp),e=(this.progress/this.activetransitionSpeed*100).toFixed(2),this.previousTimeStamp=t,this.refreshColors(e),e<100?this.animation=requestAnimationFrame(this.animateColors.bind(this)):this.channelsIndex<this.states[this.activeState].gradients.length-2||o?(this.isChangingState&&(this.activetransitionSpeed=this.states[this.activeState].transitionSpeed||5e3),this.previousTimeStamp=null,this.progress=0,this.channelsIndex++,s=!1,this.channelsIndex===this.states[this.activeState].gradients.length-1?s=!0:this.channelsIndex===this.states[this.activeState].gradients.length&&(this.channelsIndex=0),i=void 0===this.states[this.activeState].gradients[this.channelsIndex+1]?this.states[this.activeState].gradients[0]:this.states[this.activeState].gradients[this.channelsIndex+1],this.setColors(),this.animation=requestAnimationFrame(this.animateColors.bind(this)),this.callbacks.onGradientChange&&this.callbacks.onGradientChange({isLooping:s,colorsFrom:this.states[this.activeState].gradients[this.channelsIndex],colorsTo:i,activeState:this.activeState}),this.canvas.dispatchEvent(this.events.gradientChange({isLooping:s,colorsFrom:this.states[this.activeState].gradients[this.channelsIndex],colorsTo:i,activeState:this.activeState}))):(cancelAnimationFrame(this.animation),this.callbacks.onEnd&&this.callbacks.onEnd(),this.canvas.dispatchEvent(new CustomEvent("granim:end")))}},{}],3:[function(t,e,s){"use strict";e.exports=function(t){var e,s,i=this;this.activeState!==t&&(this.isPaused||(this.isPaused=!0,this.pause()),this.channelsIndex=-1,this.activetransitionSpeed=this.stateTransitionSpeed,this.activeColorDiff=[],this.activeColors=this.getCurrentColors(),this.progress=0,this.previousTimeStamp=null,this.isChangingState=!0,this.states[t].gradients[0].forEach(function(n,o,a){e=i.hexToRgb(i.states[t].gradients[0][o]),s=i.colorDiff(i.activeColors[o],e),i.activeColorDiff.push(s)}),this.activeState=t,this.play())}},{}],4:[function(t,e,s){"use strict";e.exports=function(){this.isPaused?this.isPaused=!1:cancelAnimationFrame(this.animation),this.isCleared=!0,this.context.clearRect(0,0,this.x1,this.y1)}},{}],5:[function(t,e,s){"use strict";e.exports=function(t,e){var s,i=[];for(s=0;s<3;s++)i.push(e[s]-t[s]);return i}},{}],6:[function(t,e,s){"use strict";e.exports=function(){function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var s=document.createEvent("CustomEvent");return s.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),s}"function"!=typeof window.CustomEvent&&(t.prototype=window.Event.prototype,window.CustomEvent=t)}},{}],7:[function(t,e,s){"use strict";e.exports=function(){var t,e=[];return this.currentColors.forEach(function(s,i,n){for(e.push([]),t=0;t<3;t++)e[i].push(s[t])}),e}},{}],8:[function(t,e,s){"use strict";e.exports=function(){this.x1=this.canvas.offsetWidth,this.y1=this.canvas.offsetHeight}},{}],9:[function(t,e,s){"use strict";e.exports=function(t){if(t instanceof HTMLCanvasElement)this.canvas=t;else{if("string"!=typeof t)throw new Error("The element you used is neither a String, nor a HTMLCanvasElement");this.canvas=document.querySelector(t)}if(!this.canvas)throw new Error("`"+t+"` could not be found in the DOM")}},{}],10:[function(t,e,s){"use strict";e.exports=function(){var t,e=this.getCurrentColors(),s=[],i=null;return e.forEach(function(t,e,i){s.push(Math.max(t[0],t[1],t[2]))}),s.forEach(function(e,n,o){i=null===i?e:i+e,n===s.length-1&&(t=Math.round(i/(n+1)))}),t>=128?"light":"dark"}},{}],11:[function(t,e,s){"use strict";e.exports=function(t){var e=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;t=t.replace(e,function(t,e,s,i){return e+e+s+s+i+i});var s=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return s?[parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)]:null}},{}],12:[function(t,e,s){"use strict";e.exports=function(){var t,e,s=this.setDirection(),i=document.querySelector(this.elToSetClassOn).classList;for(this.context.clearRect(0,0,this.x1,this.y1),t=0;t<this.currentColors.length;t++)e=t?(1/(this.currentColors.length-1)*t).toFixed(2):0,s.addColorStop(e,"rgba("+this.currentColors[t][0]+", "+this.currentColors[t][1]+", "+this.currentColors[t][2]+", "+this.opacity[t]+")");this.name&&("light"===this.getLightness()?(i.remove(this.name+"-dark"),i.add(this.name+"-light")):(i.remove(this.name+"-light"),i.add(this.name+"-dark"))),this.context.fillStyle=s,this.context.fillRect(0,0,this.x1,this.y1)}},{}],13:[function(t,e,s){"use strict";e.exports=function(){this.getDimensions(),this.canvas.setAttribute("width",this.x1),this.canvas.setAttribute("height",this.y1),this.refreshColors()}},{}],14:[function(t,e,s){"use strict";e.exports=function(t){var e="isPausedBecauseNotInView"===t;this.isCleared||(e||(this.isPaused=!0),cancelAnimationFrame(this.animation))}},{}],15:[function(t,e,s){"use strict";e.exports=function(){function t(t){e&&clearTimeout(e),e=setTimeout(function(){var e=s.canvas.getBoundingClientRect(),i=e.bottom<0||e.right<0||e.left>window.innerWidth||e.top>window.innerHeight;i?s.isPaused||s.isPausedBecauseNotInView||(s.isPausedBecauseNotInView=!0,s.pause("isPausedBecauseNotInView")):s.isPaused&&t!==!0||(s.isPausedBecauseNotInView=!1,s.play("isPausedBecauseNotInView"))},300)}var e,s=this;window.addEventListener("scroll",t),t(!0)}},{}],16:[function(t,e,s){"use strict";e.exports=function(t){var e="isPausedBecauseNotInView"===t;e||(this.isPaused=!1),this.isCleared=!1,this.animation=requestAnimationFrame(this.animateColors.bind(this))}},{}],17:[function(t,e,s){"use strict";e.exports=function(t){var e,s,i=this;this.activeColors.forEach(function(n,o,a){for(s=0;s<3;s++)e=i.activeColors[o][s]+Math.ceil(i.activeColorDiff[o][s]/100*t),e<=255&&e>=0&&(i.currentColors[o][s]=e)}),this.makeGradient()}},{}],18:[function(t,e,s){"use strict";e.exports=function(){var t,e,s=this;return this.channels[this.activeState]||(this.channels[this.activeState]=[]),void 0!==this.channels[this.activeState][this.channelsIndex]?(this.activeColors=this.channels[this.activeState][this.channelsIndex].colors,void(this.activeColorDiff=this.channels[this.activeState][this.channelsIndex].colorsDiff)):(this.channels[this.activeState].push([{}]),this.channels[this.activeState][this.channelsIndex].colors=[],this.channels[this.activeState][this.channelsIndex].colorsDiff=[],this.activeColors=[],this.activeColorDiff=[],this.states[this.activeState].gradients[this.channelsIndex].forEach(function(i,n,o){var a=s.hexToRgb(i),r=s.channels[s.activeState];r[s.channelsIndex].colors.push(a),s.activeColors.push(a),s.iscurrentColorsSet||s.currentColors.push(s.hexToRgb(i)),s.channelsIndex===s.states[s.activeState].gradients.length-1?t=s.colorDiff(r[s.channelsIndex].colors[n],r[0].colors[n]):(e=s.hexToRgb(s.states[s.activeState].gradients[s.channelsIndex+1][n]),t=s.colorDiff(r[s.channelsIndex].colors[n],e)),r[s.channelsIndex].colorsDiff.push(t),s.activeColorDiff.push(t)}),this.activetransitionSpeed=this.states[this.activeState].transitionSpeed||5e3,void(this.iscurrentColorsSet=!0))}},{}],19:[function(t,e,s){"use strict";e.exports=function(){var t=this.context;switch(this.direction){default:case"diagonal":return t.createLinearGradient(0,0,this.x1,this.y1);case"left-right":return t.createLinearGradient(0,0,this.x1,0);case"top-bottom":return t.createLinearGradient(this.x1/2,0,this.x1/2,this.y1);case"radial":return t.createRadialGradient(this.x1/2,this.y1/2,this.x1/2,this.x1/2,this.y1/2,0)}}},{}],20:[function(t,e,s){window.Granim=t("./lib/Granim.js")},{"./lib/Granim.js":1}]},{},[20]);

functions.php

// Register home-hero widget area.
genesis_register_widget_area(
    array(
        'id'          => 'home-hero',
        'name'        => __( 'Home Hero', 'my-theme-text-domain' ),
        'description' => __( 'This is the hero widget area appearing below header on front page.', 'my-theme-text-domain' ),
    )
);

add_action( 'genesis_after_header', 'sk_home_hero' );
/**
 * Display Home Hero widget area below header on front page.
 */
function sk_home_hero() {
    // if this is not the front page, abort.
    if ( ! is_front_page() ) {
        return;
    }

    genesis_widget_area( 'home-hero', array(
        'before'    => '<div class="home-hero widget-area"><canvas id="hero-gradient"></canvas><div class="wrap">',
        'after'     => '</div></div>',
    ) );
}

add_action( 'wp_enqueue_scripts', 'sk_enqueue_granim' );
/**
 * Enqueue and initialize Granim.
 */
function sk_enqueue_granim() {
    wp_enqueue_script( 'granim', get_stylesheet_directory_uri() . '/js/granim.min.js', '', '1.0.6', true );

    wp_enqueue_script( 'granim-init', get_stylesheet_directory_uri() . '/js/granim-init.js', array( 'granim' ), '1.0.0', true );
}

style.css

.home-hero {
    position: relative;
    padding: 100px 0;
    color: #fff;
    text-align: center;
}

#hero-gradient {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.home-hero .wrap {
    position: relative;
    z-index: 20;
    max-width: 800px;
}

.home-hero .widget-title {
    font-size: 30px;
    margin-bottom: 40px;
}

css 古滕贝格

style-editor.css

body {
	color: #333;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.625;
}

p,
ul,
ol,
dl {
	font-size: 18px;
	line-height: 1.625;
}

/* Tables
---------------------------------------------------------------------------- */

table {
	width: 100%;
}

tbody,
td,
th {
	border-color: #eee;
	text-align: left;
}

td,
th {
	padding: 10px;
	text-align: left;
	vertical-align: top;
}

th {
	font-weight: 600;
}

td:first-child,
th:first-child {
	padding-left: 0;
}

/* Regular content width.
/* 702px + 27px to match paragraph width on front-end and editor.
---------------------------------------------------------------------------- */

.wp-block {
	max-width: 732px;
}

/* Width of "wide" blocks
/* 1062px + 30px so wide images match width in front-end and editor.
/* 1062px = default column width of 702px + .alignwide negative margin of 360px
---------------------------------------------------------------------------- */

.wp-block[data-align="wide"] {
	max-width: 1092px;
}

.wp-block[data-align="full"] {
	max-width: none;
}

/* Typography
---------------------------------------------------------------------------- */

a {
	color: #0073e5;
}

a:focus,
a:hover {
	color: #333;
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 20px;
}

h1 {
	font-size: 30px;
}

h2 {
	font-size: 27px;
}

h3 {
	font-size: 24px;
	font-weight: 600;
}

h4 {
	font-size: 20px;
	font-weight: 600;
	margin-top: 40px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

.wp-block-heading h1.light,
.wp-block-heading h2.light,
.wp-block-heading h3.light,
.wp-block-heading h4.light,
.wp-block-heading h5.light,
.wp-block-heading h6.light {
	color: #f5f5f5;
}

.editor-post-title__block .editor-post-title__input {
	font-family: "Source Sans Pro", sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 20px;
}

p.has-drop-cap:not(:focus)::first-letter {
	margin: 0.02em 0.08em 0 -0.08em;
}

p.has-larger-font-size.has-drop-cap:not(:focus)::first-letter,
p.has-small-font-size.has-drop-cap:not(:focus)::first-letter {
	margin-right: 0.01em;
}

/* Background Color
---------------------------------------------------------------------------- */

p.has-background {
	padding: 25px 30px;
}

p.box-shadow {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

p.has-background a,
p.has-text-color a {
	color: inherit;
}

p.has-background a:focus,
p.has-background a:hover,
p.has-text-color a:focus,
p.has-text-color a:hover {
	color: inherit;
	text-decoration: none;
}

p.has-background.light-text a {
	color: #fff;
	text-decoration: underline;
}

p.has-background.light-text a:focus,
p.has-background.light-text a:hover {
	text-decoration: none;
}

/* Blockquotes and captions
---------------------------------------------------------------------------- */

.wp-block-pullquote,
.wp-block-quote {
	border: none;
	margin: 24px 0 36px;
}

.wp-block-quote:not(.is-large):not(.is-style-large) {
	border: none;
	padding: 0;
}

.wp-block-pullquote.alignleft {
	margin: 0 2em 1.5em 0;
}

.wp-block-pullquote.alignright {
	margin: 0 0 1.5em 2em;
}

.wp-block-pullquote p,
.wp-block-quote p {
	font-family: "Source Sans Pro", serif;
	font-size: 21px !important;
	font-style: italic;
	line-height: 1.8;
	margin-bottom: 42px;
}

.wp-block-pullquote p,
.wp-block-quote.is-style-large p {
	font-size: 32px !important;
}

.wp-block-pullquote.is-style-solid-color p {
	color: #fff;
	margin-bottom: 42px;
	text-align: center;
}

.wp-block-pullquote.is-style-solid-color {
	background-color: #333;
}


.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
.wp-block-pullquote.is-style-solid-color.alignright blockquote {
	max-width: 80%;
}

.wp-block-pullquote:not(.is-style-solid-color)[style*="border-color"] {
	border: 2px solid;
	border-left: none;
	border-right: none;
}

.wp-block-pullquote .wp-block-pullquote__citation,
.wp-block-quote .wp-block-quote__citation {
	color: #666;
	display: block;
	font-family: "Source Sans Pro", serif;
	font-size: 16px;
	font-style: italic;
	margin-top: -25px;
	text-align: inherit;
	text-transform: none;
}

.wp-block-pullquote .wp-block-pullquote__citation {
	text-align: center;
}

.wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation {
	color: #fff;
	font-style: italic;
}

.wp-block-pullquote .has-text-color .wp-block-pullquote__citation,
.wp-block-pullquote .has-text-color p {
	color: currentColor;
}

.wp-block-audio figcaption,
.wp-block-embed figcaption,
.wp-block-image figcaption {
	color: #666;
	font-size: 16px;
	font-style: italic;
	margin-bottom: 30px;
	margin-top: 10px;
}

.wp-block-pullquote[class*="align"] .wp-block-pullquote__citation,
.wp-block-quote[class*="align"] .wp-block-quote__citation {
	text-align: center;
}

/* Cover Image
---------------------------------------------------------------------------- */

.wp-block-cover .wp-block-cover-text {
	color: #fff;
	font-size: 48px;
}

/* Figcaption
---------------------------------------------------------------------------- */

.wp-block-image figcaption {
	color: #666;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 14px;
	font-style: italic;
	margin-top: 10px;
}

/* Lists
---------------------------------------------------------------------------- */

.editor-block-list__block li {
	line-height: 1.625;
	margin-bottom: 0;
}

/* Preformatted elements
---------------------------------------------------------------------------- */

.wp-block-preformatted pre,
.wp-block-verse pre {
	font-family: monospace;
	font-size: 18px;
	line-height: 1.625 !important;
}

/* Separators
---------------------------------------------------------------------------- */

hr.wp-block-separator {
	border: none;
	border-top: 1px solid #eee;
	margin: 1.65em auto;
}

hr.wp-block-separator.is-style-dots {
	border: none;
}

/* Tables
---------------------------------------------------------------------------- */

.wp-block-table {
	font-size: 18px;
	line-height: 2;
}

.wp-block-table td,
.wp-block-table th,
.wp-block-table tr {
	border: none;
}

.wp-block-table tr {
	border-top: 1px solid #eee;
}

.wp-block-table tbody {
	border-bottom: 1px solid #eee;
}

/* Buttons
---------------------------------------------------------------------------- */

.ab-block-cta .ab-button {
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 600;
}

.wp-block-button .wp-block-button__link {
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 600;
	line-height: 24px;
	padding: 15px 30px;
	text-align: center;
	text-decoration: none;
	white-space: normal;
}

.wp-block-button.is-style-squared .wp-block-button__link {
	border-radius: 0;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid currentColor;
	border-radius: 0;
	padding: 13px 28px;
}

.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:hover {
	box-shadow: inset 0 0 200px rgba(230, 230, 230, 0.15);
}

/* Galleries
---------------------------------------------------------------------------- */

.wp-block-gallery .blocks-gallery-item {
	margin-bottom: 16px;
}

/* Category Block
---------------------------------------------------------------------------- */

.wp-block-categories ul {
	margin-left: 0;
	padding-left: 0;
}

.wp-block-categories li {
	list-style-type: none;
}

.wp-block[data-align="right"] .wp-block-categories__list {
	text-align: right;
}

.wp-block[data-align="full"] .wp-block-categories__list {
	padding: 0 30px;
}

/* Latest Posts Block
---------------------------------------------------------------------------- */

.wp-block-latest-posts {
	margin-left: 0;
	padding-left: 0;
}

.wp-block-latest-posts li {
	list-style-type: none;
}

.wp-block[data-align="center"] .wp-block-latest-posts {
	text-align: center;
}

.wp-block[data-align="full"] .wp-block-latest-posts {
	padding: 0 30px;
}

/* Columns block
---------------------------------------------------------------------------- */

.wp-block[data-align="full"] .wp-block-columns > .editor-inner-blocks {
	padding: 0 30px;
}

inline-styles.php

<?php
/**
 * Adds front-end inline styles for the custom Gutenberg color palette.
 *
 * @package Genesis Sample
 * @author  StudioPress
 * @license GPL-2.0-or-later
 * @link    https://www.studiopress.com/
 */

add_action( 'wp_enqueue_scripts', 'genesis_sample_custom_gutenberg_css' );
/**
 * Outputs front-end inline styles based on colors declared in config/appearance.php.
 *
 * @since 2.9.0
 */
function genesis_sample_custom_gutenberg_css() {

	$appearance = genesis_get_config( 'appearance' );

	$css = <<<CSS
.ab-block-post-grid .ab-post-grid-items h2 a:hover {
	color: {$appearance['link-color']};
}

.site-container .wp-block-button .wp-block-button__link {
	background-color: {$appearance['link-color']};
}

.wp-block-button .wp-block-button__link:not(.has-background),
.wp-block-button .wp-block-button__link:not(.has-background):focus,
.wp-block-button .wp-block-button__link:not(.has-background):hover {
	color: {$appearance['button-color']};
}

.site-container .wp-block-button.is-style-outline .wp-block-button__link {
	color: {$appearance['button-bg']};
}

.site-container .wp-block-button.is-style-outline .wp-block-button__link:focus,
.site-container .wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: {$appearance['button-outline-hover']};
}
CSS;

	$css .= genesis_sample_inline_font_sizes();
	$css .= genesis_sample_inline_color_palette();

	wp_add_inline_style( genesis_get_theme_handle() . '-gutenberg', $css );

}

add_action( 'enqueue_block_editor_assets', 'genesis_sample_custom_gutenberg_admin_css' );
/**
 * Outputs back-end inline styles based on colors declared in config/appearance.php.
 *
 * Note this will appear before the style-editor.css injected by JavaScript,
 * so overrides will need to have higher specificity.
 *
 * @since 2.9.0
 */
function genesis_sample_custom_gutenberg_admin_css() {

	$appearance = genesis_get_config( 'appearance' );

	$css = <<<CSS
.ab-block-post-grid .ab-post-grid-items h2 a:hover,
.block-editor__container .editor-block-list__block a {
	color: {$appearance['link-color']};
}

.editor-styles-wrapper .editor-rich-text .button,
.editor-styles-wrapper .wp-block-button .wp-block-button__link:not(.has-background) {
	background-color: {$appearance['button-bg']};
	color: {$appearance['button-color']};
}

.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
	color: {$appearance['button-bg']};
}

.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link:focus,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: {$appearance['button-outline-hover']};
}
CSS;

	wp_add_inline_style( genesis_get_theme_handle() . '-gutenberg-fonts', $css );

}

/**
 * Generate CSS for editor font sizes from the provided theme support.
 *
 * @since 2.9.0
 *
 * @return string The CSS for editor font sizes if theme support was declared.
 */
function genesis_sample_inline_font_sizes() {

	$css               = '';
	$editor_font_sizes = get_theme_support( 'editor-font-sizes' );

	if ( ! $editor_font_sizes ) {
		return '';
	}

	foreach ( $editor_font_sizes[0] as $font_size ) {
		$css .= <<<CSS
		.site-container .has-{$font_size['slug']}-font-size {
			font-size: {$font_size['size']}px;
		}
CSS;
	}

	return $css;

}

/**
 * Generate CSS for editor colors based on theme color palette support.
 *
 * @since 2.9.0
 *
 * @return string The editor colors CSS if `editor-color-palette` theme support was declared.
 */
function genesis_sample_inline_color_palette() {

	$css                  = '';
	$appearance           = genesis_get_config( 'appearance' );
	$editor_color_palette = $appearance['editor-color-palette'];

	foreach ( $editor_color_palette as $color_info ) {
		$css .= <<<CSS
		.site-container .has-{$color_info['slug']}-color,
		.site-container .wp-block-button .wp-block-button__link.has-{$color_info['slug']}-color,
		.site-container .wp-block-button.is-style-outline .wp-block-button__link.has-{$color_info['slug']}-color {
			color: {$color_info['color']};
		}

		.site-container .has-{$color_info['slug']}-background-color,
		.site-container .wp-block-button .wp-block-button__link.has-{$color_info['slug']}-background-color,
		.site-container .wp-block-pullquote.is-style-solid-color.has-{$color_info['slug']}-background-color {
			background-color: {$color_info['color']};
		}
CSS;
	}

	return $css;

}

init.php

<?php
/**
 * Gutenberg theme support.
 *
 * @package Genesis Sample
 * @author  StudioPress
 * @license GPL-2.0-or-later
 * @link    https://www.studiopress.com/
 */

add_action( 'wp_enqueue_scripts', 'genesis_sample_enqueue_gutenberg_frontend_styles' );
/**
 * Enqueues Gutenberg front-end styles.
 *
 * @since 2.7.0
 */
function genesis_sample_enqueue_gutenberg_frontend_styles() {

	wp_enqueue_style(
		genesis_get_theme_handle() . '-gutenberg',
		get_stylesheet_directory_uri() . '/lib/gutenberg/front-end.css',
		array( genesis_get_theme_handle() ),
		genesis_get_theme_version()
	);

}

add_action( 'enqueue_block_editor_assets', 'genesis_sample_block_editor_styles' );
/**
 * Enqueues Gutenberg admin editor fonts and styles.
 *
 * @since 2.7.0
 */
function genesis_sample_block_editor_styles() {

	$appearance = genesis_get_config( 'appearance' );

	wp_enqueue_style(
		genesis_get_theme_handle() . '-gutenberg-fonts',
		$appearance['fonts-url'],
		array(),
		genesis_get_theme_version()
	);

}

add_filter( 'body_class', 'genesis_sample_blocks_body_classes' );
/**
 * Adds body classes to help with block styling.
 *
 * - `has-no-blocks` if content contains no blocks.
 * - `first-block-[block-name]` to allow changes based on the first block (such as removing padding above a Cover block).
 * - `first-block-align-[alignment]` to allow styling adjustment if the first block is wide or full-width.
 *
 * @since 2.8.0
 *
 * @param array $classes The original classes.
 * @return array The modified classes.
 */
function genesis_sample_blocks_body_classes( $classes ) {

	if ( ! is_singular() || ! function_exists( 'has_blocks' ) || ! function_exists( 'parse_blocks' ) ) {
		return $classes;
	}

	if ( ! has_blocks() ) {
		$classes[] = 'has-no-blocks';
		return $classes;
	}

	$post_object = get_post( get_the_ID() );
	$blocks      = (array) parse_blocks( $post_object->post_content );

	if ( isset( $blocks[0]['blockName'] ) ) {
		$classes[] = 'first-block-' . str_replace( '/', '-', $blocks[0]['blockName'] );
	}

	if ( isset( $blocks[0]['attrs']['align'] ) ) {
		$classes[] = 'first-block-align-' . $blocks[0]['attrs']['align'];
	}

	return $classes;

}

// Add support for editor styles.
add_theme_support( 'editor-styles' );

// Enqueue editor styles.
add_editor_style( '/lib/gutenberg/style-editor.css' );

// Adds support for block alignments.
add_theme_support( 'align-wide' );

// Make media embeds responsive.
add_theme_support( 'responsive-embeds' );

$genesis_sample_appearance = genesis_get_config( 'appearance' );

// Adds support for editor font sizes.
add_theme_support(
	'editor-font-sizes',
	$genesis_sample_appearance['editor-font-sizes']
);

// Adds support for editor color palette.
add_theme_support(
	'editor-color-palette',
	$genesis_sample_appearance['editor-color-palette']
);

require_once get_stylesheet_directory() . '/lib/gutenberg/inline-styles.php';

add_action( 'after_setup_theme', 'genesis_sample_content_width', 0 );
/**
 * Set content width to match the “wide” Gutenberg block width.
 */
function genesis_sample_content_width() {

	$appearance = genesis_get_config( 'appearance' );

	// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- See https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/issues/924
	$GLOBALS['content_width'] = apply_filters( 'genesis_sample_content_width', $appearance['content-width'] );

}

front-end.css

/ * Drop Caps
-------------------------------------------------- -------------------------- * /

.site-container p.has-drop-cap: not (: focus) :: first-letter {
	margin: 0.02em 0.08em 0 -0.08em;
}

.site-container p.has-larger-font-size.has-drop-cap: not (: focus) :: first-letter,
.site-container p.has-small-font-size.has-drop-cap: not (: focus) :: first-letter {
	margin-right: 0.01em;
}

/ * Headings
-------------------------------------------------- -------------------------- * /

h1.light,
h2.light,
h3.light,
h4.light,
h5.light,
h6.light {
	color: # f5f5f5;
}

/ * Background Color
-------------------------------------------------- -------------------------- * /

.site-container p.has-background {
	padding: 25px 30px;
}

.site-container p.has-background.box-shadow {
	box-shadow: 0 0 20px rgba (0, 0, 0, 0.1);
}

.site-container p.has-text-color a,
.site-container p.has-background a {
	color: inherit;
}

.site-container p.has-background a: focus,
.site-container p.has-background a: hover,
.site-container p.has-text-color a: focus,
.site-container p.has-text-color to: hover {
	color: inherit;
	text-decoration: none;
}

.site-container p.has-background.light-text a {
	color: #fff;
	text-decoration: underline;
}

.site-container p.has-background.light-text a: focus,
.site-container p.has-background.light-text a: hover {
	text-decoration: none;
}

/ * Alignment
-------------------------------------------------- -------------------------- * /

.wp-block-button.alignleft,
.wp-block-cover.alignleft,
.wp-block-image .alignleft {
	margin-right: 2em;
}

.wp-block-button.alignright,
.wp-block-cover.alignright,
.wp-block-image .alignright {
	margin-left: 2em;
}

.wp-block-image.alignwide,
.wp-block-image.alignfull,
.wp-block-embed.alignwide,
.wp-block-embed.alignfull {
	margin-bottom: 30px;
}

.full-width-content .site-container .alignfull {
	margin-left: calc (-100vw / 2 + 100% / 2);
	margin-right: calc (-100vw / 2 + 100% / 2);
	max-width: 100vw;
}

.content-sidebar .site-container .alignfull,
.sidebar-content .site-container .alignfull {
	margin: 0 0 2em;
	width: 100%;
}

@media only screen and (max-width: 600px) {

	.wp-block-button.home-contact {
		float: left;
		margin-left: 0;
	}

}

/ * Columns
-------------------------------------------------- -------------------------- * /

.site-container .wp-block-columns {
	margin-bottom: 30px;
}

.site-container .wp-block-columns.alignfull {
	padding: 0 30px;
}

/ * Cover Image
-------------------------------------------------- -------------------------- * /

.full-width-content .site-container .wp-block-cover.alignfull {
	width: 100vw;
}

.wp-block-cover .wp-block-cover-text
	font-size: 48px;
}

/ * Buttons
-------------------------------------------------- -------------------------- * /

.ab-block-cta .ab-button {
	font-family: "Source Without Pro", sans-serif;
	font-weight: 600;
}

.site-container .wp-block-button .wp-block-button__link {
	border-width: 0;
	border-radius: 5px;
	cursor: point;
	font-size: 16px;
	font-family: "Source Without Pro", sans-serif;
	font-weight: 600;
	padding: 15px 30px;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	width: auto;
}

/ * Button Variations * /
.site-container .wp-block-button.is-style-squared .wp-block-button__link {
	border-radius: 0;
}

.site-container .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid currentColor;
	border-radius: 0;
	padding: 13px 28px;
}

.site-container .wp-block-button .wp-block-button__link: focus,
.web-block-button .wp-block-button__link: hover,
.site-container .wp-block-button.is-style-outline .wp-block-button__link: focus,
.web-block-button.is-style-outline .wp-block-button__link: hover {
	box-shadow: inset 0 0 200px rgba (230, 230, 230, 0.25);
}

/ * Blockquotes and captions
-------------------------------------------------- -------------------------- * /

.site-container .wp-block-pullquote,
.site-container .wp-block-quote {
	border: none;
	margin: 24px 24px 36px;
}

.wp-block-pullquote.alignleft {
	margin: 0 2nd 1.5em 0;
}

.wp-block-pullquote.alignright {
	margin: 0 0 1.5em 2em;
}

.site-container .wp-block-pullquote p,
.site-container .wp-block-quote p {
	font-family: "Source Without Pro", serif;
	font-size: 21px;
	font-style: italic;
	line-height: 1.8;
	margin-bottom: 42px;
}

.site-container .wp-block-pullquote p,
.site-container .wp-block-quote.is-style-large p {
	font-size: 32px;
}

.site-container .wp-block-pullquote.is-style-solid-color p {
	color: #fff;
	margin-bottom: 42px;
	text-align: center;
}

.site-container .wp-block-pullquote.is-style-solid-color {
	background-color: # 333;
}

.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
.wp-block-pullquote.is-style-solid-color.alignright blockquote {
	max-width: 80%;
}

.site-container .wp-block-pullquote: not (.is-style-solid-color) [style * = "border-color"] {
	border: 2px solid;
	border-left: none;
	border-right: none;
}

.site-container .wp-block-pullquote quotes,
.site-container .wp-block-quote quote {
	color: # 666;
	display: block;
	font-family: "Source Without Pro", serif;
	font-size: 16px;
	font-style: italic;
	margin-top: -25px;
	text-align: inherit;
	text-transform: none;
}

.site-container .wp-block-pullquote quote {
	text-align: center;
}

.site-container .wp-block-pullquote.is-style-solid-color cite {
	color: #fff;
	font-style: italic;
}

.site-container .wp-block-pullquote .has-text-color quotes,
.site-container .wp-block-pullquote .has-text-color p {
	color: currentColor;
}

.site-container .wp-block-audio figcaption,
.site-container .wp-block-embed figcaption,
.site-container .wp-block-image figcaption {
	color: # 666;
	font-size: 16px;
	font-style: italic;
	margin-bottom: 30px;
	margin-top: 10px;
}

/ * Category Block
-------------------------------------------------- -------------------------- * /

.site-container .wp-block-categories,
.site-container .wp-block-categories ol,
.site-container .wp-block-categories
	margin-left: 0;
	padding-left: 0;
}

.site-container .wp-block-categories
	list-style-type: none;
}

.site-container .wp-block-categories.aligncenter {
	text-align: center;
}

.site-container .wp-block-categories-list.alignfull {
	padding: 0 30px;
}

/ * Latest Posts Block
-------------------------------------------------- -------------------------- * /

.site-container .wp-block-latest-posts {
	clear: both;
	margin-left: 0;
	padding-left: 0;
}

.site-container .wp-block-latest-posts
	list-style-type: none;
}

.site-container .wp-block-latest-posts.aligncenter {
	text-align: center;
}

.site-container .wp-block-latest-posts.alignfull {
	padding: 0 30px;
}

/ * Atomic Blocks
-------------------------------------------------- -------------------------- * /

.ab-block-post-grid h2 a {
	text-decoration: none;
}

@media only screen and (max-width: 510px) {

	.ab-block-container.alignfull :: before {
		happy: " ";
		display: table;
	}

	.ab-block-container.alignfull :: after {
		clear: both;
		happy: " ";
		display: table;
	}

}

/ * Other Blocks
-------------------------------------------------- -------------------------- * /

.wp-block-preformatted,
.wp-block-verse {
	font-size: 16px;
}

.wp-block-preformatted {
	white-space: pre-wrap;
}

hr.wp-block-separator {
	border: none;
	border-top: 1px solid #eee;
	margin: 1.65em auto;
}

.wp-block-separator: not (.is-style-wide): not (.is-style-dots) {
	max-width: 100px;
}

.wp-block-audio audio {
	display: inline-block;
	width: 100%;
}

.site-container .wp-block-gallery {
	padding-left: 0;
}

.full-width-content .site-container .wp-block-table.alignfull {
	margin: 0;
	width: 100%;
}

@media only screen and (min-width: 960px) {

	.full-width-content .site-container .wp-block-table.alignwide {
		width: calc (100% + 360px);
	}

	.full-width-content .site-container .wp-block-table.alignfull {
		margin-left: calc (-98vw / 2 + 100% / 2);
		margin-right: calc (-98vw / 2 + 100% / 2);
		width: 98vw;
	}

}

@media only screen and (max-width: 600px) {

	.wp-block-media-text.is-stacked-on-mobile figure {
		margin-bottom: 20px;
	}

}

/ * Templates Page
-------------------------------------------------- -------------------------- * /

.page-template-blocks .site-inner {
	padding-top: 0;
}

.page-template-blocks .post-edit-link {
	display: block;
	text-align: center;
}

/ * Media Queries
-------------------------------------------------- -------------------------- * /


@media only screen and (max-width: 781px) {

	.has-3-columns .wp-block-column,
	.has-5-columns .wp-block-column {
		flex-basis: 100%;
		margin-left: 0;
		margin-right: 0;
	}

}

@media only screen and (min-width: 960px) {

	.full-width-content .site-container .alignwide {
		margin-left: -180px;
		margin-right: -180px;
		max-width: calc (100% + 360px); / * 360 equals sum of left and right margin * /
		width: auto;
	}

}

css AMP

amp.css

/*
Genesis AMP styling.
This currently loads only on AMP pages.
*/

/* Reveals the submenu upon parent hover.
--------------------------------------------- */
.genesis-nav-menu .menu-item .sub-menu {
	display: block;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.5s ease 0.2s;
}

.genesis-responsive-menu .genesis-nav-menu .menu-item:hover > .sub-menu {
	display: block;
	transform: scaleY(1);
}

/* Reveals the submenu upon tabbing with keyboard.
--------------------------------------------- */

/*
 * :focus-within needs its own selector.
 * Why? If the event a browser does not recognize this pseudo-class, only this
 * selector and its declarations are ignored. Isolating it ensures the submenu
 * animation works on :hover.
 */
.menu .menu-item:focus-within > .sub-menu {
	transform: scaleY(1);
	left: auto;
	opacity: 1;
}

/* Overrides for different breakpoint to follow non-AMP implementation. */
@media only screen and (max-width: 959px) {

	.genesis-responsive-menu {
		display: block;
		position: absolute;
		left: -9999px;
		opacity: 0;
		transform: scaleY(0);
		transform-origin: top;
		transition: transform 0.2s ease;
	}

	.genesis-responsive-menu.toggled-on {
		opacity: 1;
		position: relative;
		left: auto;
		transform: scaleY(1);
	}

	.genesis-responsive-menu.toggled-on .menu-item .sub-menu,
	.genesis-responsive-menu.toggled-on .menu-item:hover > .sub-menu {
		display: none;
	}

	.genesis-responsive-menu.toggled-on .sub-menu-toggle.toggled-on + .sub-menu {
		display: block;
		transform: scaleY(1);
	}
}

css calc css

calc.css

right: calc((69rem - 100vw) / 2);

css 单选按钮焦点样式

focus-radio-button.css

.radio:focus {
  outline: 0; 
}

.radio:focus::before {
  box-shadow: 0 0 1px 2px #5B9DD9;
}