源代码：
</div><div>.g-container {</div><div> width: 300px;</div><div> margin: 50px auto; </div><div>}</div><div> </div><div>.g-container p {</div><div> line-height: 1.4;</div><div> padding-left: 40px; </div><div>}</div><div> .g-container input {</div><div> position: absolute;</div><div> border: none;</div><div> outline: none;</div><div> background: none;</div><div> width: 20px;</div><div> height: 20px;</div><div> border-radius: 50%;</div><div> border: 1px solid #aaa;</div><div> box-sizing: border-box;</div><div> top: 50%;</div><div> left: 10px;</div><div> transform: translate(0, -50%);</div><div> cursor: pointer; }</div><div> .g-container .g-section {</div><div> position: relative;</div><div> padding: 10px;</div><div> box-sizing: border-box;</div><div> border: 1px solid transparent; }</div><div> </div><div> .g-container .g-section:focus-within {</div><div> background: linear-gradient(90deg, #03a9f4 50%, transparent 0) repeat-x, linear-gradient(90deg, #03a9f4 50%, transparent 0) repeat-x, linear-gradient(0deg, #03a9f4 50%, transparent 0) repeat-y, linear-gradient(0deg, #03a9f4 50%, transparent 0) repeat-y;</div><div> background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;</div><div> background-position: 0 0, 0 100%, 0 0, 100% 0;</div><div> animation: linearGradientMove .5s infinite linear; }</div><div> .g-container .g-section:focus-within input {</div><div> background: #03a9f4; }</div><div>@keyframes linearGradientMove {</div><div> 100% {</div><div> background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%; } }</div><div>
:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配:focus伪类。
:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配:focus伪类。
:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配:focus伪类。
运行时的动态效果：
